Saturn Loader
A shaded planet inside a tilted, spinning ring that passes behind it at the top and in front at the bottom. Real 3D: the ring and planet share one preserve-3d scene.
Also known as: planet ring loader, ringed planet spinner, planet loader.
HTML
<div class="ldr-saturn" role="status" aria-label="Loading"> <span class="ldr-saturn-planet"></span> <span class="ldr-saturn-ring"></span> </div>
CSS
.ldr-saturn {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.5);
height: var(--s);
transform: rotate(-16deg);
transform-style: preserve-3d;
}
.ldr-saturn-planet {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--s) * 0.62);
height: calc(var(--s) * 0.62);
margin: calc(var(--s) * -0.31);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 65%, #000));
}
.ldr-saturn-ring {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--s) * 1.4);
height: calc(var(--s) * 1.4);
margin: calc(var(--s) * -0.7);
border-radius: 50%;
background: conic-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 0 35%, var(--c));
-webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63% 80%, transparent 81% 85%, #000 86% 99%, transparent);
mask: radial-gradient(closest-side, transparent 62%, #000 63% 80%, transparent 81% 85%, #000 86% 99%, transparent);
animation: ldr-saturn-spin 3s linear infinite;
}
@keyframes ldr-saturn-spin {
from { transform: rotateX(70deg) rotateZ(0deg); }
to { transform: rotateX(70deg) rotateZ(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-saturn, .ldr-saturn *, .ldr-saturn::before, .ldr-saturn::after, .ldr-saturn *::before, .ldr-saturn *::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.