Activity Rings Loader
Three nested rings fill to different amounts one after another, hold, then rewind, like a fitness tracker. The colors are your accent hue-rotated, and pathLength sets how far each ring fills.
Also known as: apple watch rings animation, fitness rings loader, concentric progress rings.
HTML
<div class="ldr-activity-rings" role="status" aria-label="Loading"> <svg class="ldr-activity-rings-ring" style="--i: 0" viewBox="0 0 48 48"><circle cx="24" cy="24" r="20"></circle><circle cx="24" cy="24" r="20" pathLength="112"></circle></svg> <svg class="ldr-activity-rings-ring" style="--i: 1" viewBox="0 0 48 48"><circle cx="24" cy="24" r="14"></circle><circle cx="24" cy="24" r="14" pathLength="135"></circle></svg> <svg class="ldr-activity-rings-ring" style="--i: 2" viewBox="0 0 48 48"><circle cx="24" cy="24" r="8"></circle><circle cx="24" cy="24" r="8" pathLength="104"></circle></svg> </div>
CSS
.ldr-activity-rings {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-activity-rings-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
filter: hue-rotate(calc(var(--i) * 120deg));
}
.ldr-activity-rings circle {
fill: none;
stroke: var(--c);
stroke-width: 5;
stroke-linecap: round;
}
.ldr-activity-rings circle:first-child {
opacity: 0.2;
}
/* A 100 long dash on a path of length 112 fills 89% of the ring. */
.ldr-activity-rings circle + circle {
stroke-dasharray: 100 200;
animation: ldr-activity-rings-fill 2.6s infinite both;
animation-delay: calc(var(--i) * 0.14s);
}
@keyframes ldr-activity-rings-fill {
0% { stroke-dashoffset: 101; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }
45%, 70% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
95%, 100% { stroke-dashoffset: 101; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-activity-rings, .ldr-activity-rings *, .ldr-activity-rings::before, .ldr-activity-rings::after, .ldr-activity-rings *::before, .ldr-activity-rings *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.