Pie Spinner
A solid wedge sweeps round until the circle is full, then its trailing edge sweeps after it and empties it again. Two registered angle properties drive one conic-gradient.
Also known as: pie timer loader, clock sweep loader, conic gradient loader.
HTML
<div class="ldr-pie-spinner" role="status" aria-label="Loading"></div>
CSS
@property --ldr-pie-spinner-from {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@property --ldr-pie-spinner-to {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.ldr-pie-spinner {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
border: calc(var(--s) / 16) solid var(--c);
border-radius: 50%;
}
.ldr-pie-spinner::before {
content: "";
position: absolute;
inset: calc(var(--s) / 12);
border-radius: 50%;
background: conic-gradient(transparent calc(var(--ldr-pie-spinner-from) - 0.5deg), var(--c) var(--ldr-pie-spinner-from) var(--ldr-pie-spinner-to), transparent calc(var(--ldr-pie-spinner-to) + 0.5deg));
animation: ldr-pie-spinner-sweep 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* The angles overshoot 0 and 360 by 15deg, so the slow ends of the easing happen off the disc. */
@keyframes ldr-pie-spinner-sweep {
0% { --ldr-pie-spinner-from: -15deg; --ldr-pie-spinner-to: -15deg; }
50% { --ldr-pie-spinner-from: -15deg; --ldr-pie-spinner-to: 375deg; }
100% { --ldr-pie-spinner-from: 375deg; --ldr-pie-spinner-to: 375deg; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-pie-spinner, .ldr-pie-spinner *, .ldr-pie-spinner::before, .ldr-pie-spinner::after, .ldr-pie-spinner *::before, .ldr-pie-spinner *::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.