Kaleidoscope Loader
Six mirrored wedges share one drifting pattern of shapes, so it folds into a turning mandala like a real kaleidoscope. Each wedge is a clip-path slice; every other one is flipped with scaleX(-1).
Also known as: mandala loader, kaleidoscope animation css, mirror pattern spinner.
HTML
<div class="ldr-kaleidoscope" role="status" aria-label="Loading"> <span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span><span style="--i: 4"></span><span style="--i: 5"></span> </div>
CSS
.ldr-kaleidoscope {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
animation: ldr-kaleidoscope-turn 6s linear infinite;
}
.ldr-kaleidoscope span {
--m: 1;
position: absolute;
inset: 0;
clip-path: polygon(50% 50%, 21.1% 0, 78.9% 0);
transform: rotate(calc(var(--i) * 60deg)) scaleX(var(--m));
}
.ldr-kaleidoscope span:nth-child(even) {
--m: -1;
}
.ldr-kaleidoscope span::before {
content: "";
position: absolute;
inset: -50%;
background:
radial-gradient(circle, var(--c) 0 38%, transparent 40%) 0 0 / calc(var(--s) * 0.5) calc(var(--s) * 0.5),
radial-gradient(circle, color-mix(in srgb, var(--c) 50%, #fff) 0 22%, transparent 24%) calc(var(--s) * 0.25) calc(var(--s) * 0.25) / calc(var(--s) * 0.5) calc(var(--s) * 0.5),
repeating-linear-gradient(45deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent) 0 calc(var(--s) * 0.04), transparent 0 calc(var(--s) * 0.177));
animation: ldr-kaleidoscope-drift 3s linear infinite;
}
@keyframes ldr-kaleidoscope-drift {
to { transform: translate(calc(var(--s) * 0.5), calc(var(--s) * 0.5)); }
}
@keyframes ldr-kaleidoscope-turn {
to { transform: rotate(120deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-kaleidoscope, .ldr-kaleidoscope *, .ldr-kaleidoscope::before, .ldr-kaleidoscope::after, .ldr-kaleidoscope *::before, .ldr-kaleidoscope *::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.