Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Logseq Rainbow progress indicator
/* Rainbow Progress Indicator */
[data-ref^="rainbow-"]:before {
content: '';
display: inline-block;
margin-right: .5em;
width: 30px;
height: 5px;
background: linear-gradient(to right,
grey 11%,
transparent 11%
);
}
[data-ref="rainbow-20"]:before {
background: linear-gradient(to right,
red 11%,
transparent 11%
);
}
[data-ref="rainbow-40"]:before {
background: linear-gradient(to right,
red calc(100% / 9),
transparent calc(100% / 9), transparent calc(100%/9*2),
orange calc( 100% /9*2), orange calc(100%/9*3),
transparent calc(100%/9*3)
);
}
[data-ref="rainbow-60"]:before {
background: linear-gradient(to right,
red calc(100% / 9),
transparent calc(100% / 9), transparent calc(100%/9*2),
orange calc( 100% /9*2), orange calc(100%/9*3),
transparent calc(100%/9*3), transparent calc(100%/9*4),
gold calc(100%/9*4), gold calc(100%/9*5),
transparent calc(100%/9*5)
);
}
[data-ref="rainbow-80"]:before {
background: linear-gradient(to right,
red calc(100% / 9),
transparent calc(100% / 9), transparent calc(100%/9*2),
orange calc( 100% /9*2), orange calc(100%/9*3),
transparent calc(100%/9*3), transparent calc(100%/9*4),
gold calc(100%/9*4), gold calc(100%/9*5),
transparent calc(100%/9*5), transparent calc(100%/9*6),
yellowgreen calc(100%/9*6), yellowgreen calc(100%/9*7),
transparent calc(100%/9*7)
);
}
[data-ref="rainbow-100"]:before,
[data-ref="rainbow-done"]:before {
background: linear-gradient(to right,
red calc(100% / 9),
transparent calc(100% / 9), transparent calc(100%/9*2),
orange calc( 100% /9*2), orange calc(100%/9*3),
transparent calc(100%/9*3), transparent calc(100%/9*4),
gold calc(100%/9*4), gold calc(100%/9*5),
transparent calc(100%/9*5), transparent calc(100%/9*6),
yellowgreen calc(100%/9*6), yellowgreen calc(100%/9*7),
transparent calc(100%/9*7), transparent calc(100%/9*8),
green calc(100%/9*8)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment