Tick Spinner
A twelve-tick radial spinner where each tick fades in sequence, pure CSS and tiny.
Preview and code
index.html
<div class='ts' aria-label='Loading' role='status'><i style='--i:0'></i><i style='--i:1'></i><i style='--i:2'></i><i style='--i:3'></i><i style='--i:4'></i><i style='--i:5'></i><i style='--i:6'></i><i style='--i:7'></i><i style='--i:8'></i><i style='--i:9'></i><i style='--i:10'></i><i style='--i:11'></i></div>
styles.css
.ts{position:relative;width:1.6em;height:1.6em;font-size:28px;margin:auto;display:block}.ts i{position:absolute;left:50%;top:0;width:.09em;height:.4em;margin-left:-.045em;border-radius:.05em;background:#111;transform-origin:50% .8em;transform:rotate(calc(var(--i)*30deg));opacity:.12;animation:ts-f 1s linear infinite;animation-delay:calc(var(--i)*-.0833s)}@keyframes ts-f{0%{opacity:1}100%{opacity:.12}}About
A classic activity indicator built from twelve ticks rotated around a centre point, each with a staggered fade. Scales with font-size.