<div class='loader' style='--n: 1; --f: 0'></div>
<div class='loader' style='--n: 16; --f: .2'></div>
<div class='loader' style='--n: 36; --f: .5'></div>
$r-pad: 6em;
$b: $r-pad/3;
$w-rng: .125*$b;
@property --p {
syntax: '<integer>';
initial-value: 0;
inherits: true
}
html, body, div { display: grid }
html { height: 100% }
body {
background: #222;
@media (orientation: landscape) { grid-auto-flow: column }
}
.loader {
--p: 0;
place-self: center;
transform: scale(.5);
clip-path: circle(49%);
animation: p 10s steps(100) infinite;
color: HSL(calc(var(--p)*2), 100%, 65%);
&:before, &:after {
grid-row: 1;
grid-column: 1;
}
&:before {
border: solid $b transparent;
padding: $r-pad;
border-radius: 50%;
box-shadow: inset 0 0 0 2*$w-rng currentcolor;
--slice: calc(360deg/var(--n));
--s-gap: calc(var(--f)*var(--slice));
--solid: calc((1 - var(--f))*var(--slice));
background:
repeating-conic-gradient(from calc(.5*var(--s-gap)),
currentcolor 0% var(--solid),
transparent 0% var(--slice)) border-box;
filter: blur(.5px);
mask:
conic-gradient(red 0% calc(var(--p)*1%), #{rgba(red, .3)} 0%) intersect,
linear-gradient(red, red) border-box subtract,
radial-gradient(
red 0% #{$r-pad - 2*$w-rng},
transparent calc(#{$r-pad - 2*$w-rng} + 1px) calc(#{$r-pad - $w-rng} - 1px),
red #{$r-pad - $w-rng} calc(#{$r-pad} + 1px),
transparent calc(#{$r-pad} + 2px));
content: ''
}
&:after {
place-self: center;
counter-reset: p var(--p);
font: .625*$r-pad consolas, monaco, ubuntu mono, monospace;
content: counter(p) '%'
}
}
@keyframes p { 90%, 100% { --p: 100 } }
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.