Moon Phases Loader
The moon waxes from new to full and wanes back again. A half disc and a scaling terminator ellipse do the work, eased so the phases pace like the real thing.
Also known as: moon phase animation, lunar cycle loader, crescent moon loader.
HTML
<div class="ldr-moon-phases" role="status" aria-label="Loading"></div>
CSS
.ldr-moon-phases {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--dark: color-mix(in srgb, var(--c) 22%, #0f172a);
position: relative;
width: var(--s);
height: var(--s);
overflow: hidden;
border-radius: 50%;
background: var(--dark);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
/* The lit half: right while waxing, left while waning. */
.ldr-moon-phases::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 50%;
background: var(--c);
animation: ldr-moon-phases-half 3.2s step-end infinite;
}
/* The terminator: a dark ellipse (crescent) or a lit one (gibbous). */
.ldr-moon-phases::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: var(--dark);
animation:
ldr-moon-phases-terminator 3.2s infinite,
ldr-moon-phases-tone 3.2s step-end infinite;
}
@keyframes ldr-moon-phases-half {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-100%); }
}
@keyframes ldr-moon-phases-terminator {
0%, 50% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
25%, 75% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
100% { transform: scaleX(1); }
}
@keyframes ldr-moon-phases-tone {
0%, 75%, 100% { background: var(--dark); }
25% { background: var(--c); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-moon-phases, .ldr-moon-phases *, .ldr-moon-phases::before, .ldr-moon-phases::after, .ldr-moon-phases *::before, .ldr-moon-phases *::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.