<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.