AI Sparkle Loader
The four-point AI sparkle: a large star breathes and turns a quarter while two small ones twinkle in and out beside it. Inline SVG, so the points stay crisp at any size.
Also known as: ai sparkle animation, twinkling stars loader, magic sparkles loading.
HTML
<div class="ldr-ai-sparkle" role="status" aria-label="Generating"> <svg class="ldr-ai-sparkle-star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></svg> <svg class="ldr-ai-sparkle-star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></svg> <svg class="ldr-ai-sparkle-star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></svg> </div>
CSS
.ldr-ai-sparkle {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
color: var(--c);
}
.ldr-ai-sparkle-star {
position: absolute;
fill: currentColor;
}
.ldr-ai-sparkle-star:nth-child(1) {
left: 4%;
bottom: 4%;
width: 68%;
height: 68%;
animation: ldr-ai-sparkle-breathe 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-ai-sparkle-star:nth-child(2) {
top: 2%;
right: 2%;
width: 36%;
height: 36%;
animation: ldr-ai-sparkle-twinkle 2s infinite;
}
.ldr-ai-sparkle-star:nth-child(3) {
top: 8%;
left: 6%;
width: 22%;
height: 22%;
animation: ldr-ai-sparkle-twinkle 2s -1s infinite;
}
@keyframes ldr-ai-sparkle-breathe {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(0.78) rotate(45deg); }
100% { transform: scale(1) rotate(90deg); }
}
@keyframes ldr-ai-sparkle-twinkle {
0% {
transform: scale(0) rotate(0deg);
opacity: 0;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
35% {
transform: scale(1) rotate(45deg);
opacity: 1;
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
70%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-ai-sparkle, .ldr-ai-sparkle *, .ldr-ai-sparkle::before, .ldr-ai-sparkle::after, .ldr-ai-sparkle *::before, .ldr-ai-sparkle *::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.