AI Image Generation Loader
A tile of placeholder pixels where a glowing scan line sweeps down and leaves a sharp little landscape behind it, like an image model painting. The picture is pure gradients.
Also known as: image generating animation, ai image placeholder, generative art loading.
HTML
<div class="ldr-ai-image-generating" role="status" aria-label="Generating image"> <span class="ldr-ai-image-generating-art" aria-hidden="true"></span> <span class="ldr-ai-image-generating-scan" aria-hidden="true"></span> </div>
CSS
.ldr-ai-image-generating {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.3);
height: calc(var(--s) * 1.3);
border-radius: calc(var(--s) / 7);
overflow: hidden;
background: repeating-conic-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 0 25%, color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent) 0 50%) 0 0 / calc(var(--s) / 6.5) calc(var(--s) / 6.5);
}
.ldr-ai-image-generating::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent) 50%, transparent 65%) 0 0 / 300% 100%;
animation: ldr-ai-image-generating-shimmer 1.6s linear infinite;
}
.ldr-ai-image-generating-art {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--c) 45%, #fff) 0 12%, transparent 13%),
conic-gradient(from 135deg at 34% 52%, var(--c) 0 90deg, transparent 0),
conic-gradient(from 130deg at 72% 64%, color-mix(in srgb, var(--c) 70%, #000) 0 100deg, transparent 0),
linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent));
animation: ldr-ai-image-generating-reveal 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-ai-image-generating-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: calc(var(--s) / 24);
margin-top: calc(var(--s) / -48);
background: var(--c);
box-shadow: 0 0 calc(var(--s) / 6) calc(var(--s) / 24) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent);
animation: ldr-ai-image-generating-scan 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ldr-ai-image-generating-reveal {
0% { clip-path: inset(0 0 100% 0); filter: blur(calc(var(--s) / 12)); opacity: 1; }
65% { clip-path: inset(0 0 0 0); filter: blur(0); }
88% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
100% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 0; }
}
@keyframes ldr-ai-image-generating-scan {
0% { transform: translateY(0); opacity: 1; }
65% { transform: translateY(calc(var(--s) * 1.3)); opacity: 1; }
70%, 100% { transform: translateY(calc(var(--s) * 1.3)); opacity: 0; }
}
@keyframes ldr-ai-image-generating-shimmer {
from { background-position: 100% 0; }
to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-ai-image-generating, .ldr-ai-image-generating *, .ldr-ai-image-generating::before, .ldr-ai-image-generating::after, .ldr-ai-image-generating *::before, .ldr-ai-image-generating *::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.