A loading indicator reassures people that a task is still running. The CSS `animation` property lets an element use named keyframes and sets behavior such as duration, repetition, and delay. Keep explanatory text alongside a loader so its purpose is available to screen-reader users. section 3.0 section 3.4
Start with SVG rectangles that grow and shrink toward their centers. Define that movement with keyframes, then apply the same animation to each rectangle. Give the rectangles different start delays so they reach different heights at the same time, creating a ripple effect. section 3.4
Combine three animation settings
Instead of separate `animation-name`, `animation-duration`, and `animation-iteration-count` declarations, write `rect { animation: doScale 2.2s infinite; }`. This applies the named keyframes, makes each run last 2.2 seconds, and repeats it indefinitely. Settings omitted from the shorthand or separate declarations use their defaults. section 3.4.4
The shorthand is a convenience, not a requirement: separate declarations are equally valid. To stagger this loader, set a different `animation-delay` on individual rectangles after applying their shared animation. section 3.4.4 section 3.4
Listing 3.13 Disabling the animation for users who prefer reduced motion
@media (prefers-reduced-motion: reduce) { #1
rect { animation: none; } #2
}
Motion can make some users ill. This listing shows how `@media (prefers-reduced-motion: reduce)` can set `animation: none` on the rectangles when a user requests reduced motion. section 3.5
