Animated Ripple Dot Grid Loader

This is an Animated Ripple Dot Grid Loader. It utilizes pure CSS and complex keyframe choreography to render a highly synchronized loading state. Its function is to communicate background processing while maintaining visual engagement. The effect is continuous and self-contained, requiring zero user interaction.

Specs

• Weight: ~5 KB (compiled CSS).
• Browser Support: Modern browsers supporting light-dark() color function and CSS Grid.

Anatomy

The component is built using a rigid CSS Grid layout and mathematical SCSS functions.

• HTML (The Skeleton): A simple 3x3 layout using nine identical div nodes. Specific modifier classes (--red, --sm) designate exact colors and ripple scale factors for target nodes.
• CSS (The Skin): Constructed via SCSS. It leverages CSS Grid for structural alignment and the modern light-dark() function for native, zero-JS theme switching.
• JS (The Nervous System): Absent. The entire animation sequence is declarative and handled by the browser’s CSS rendering engine.

Logic

The heart of this component is the procedural SCSS @for loop. Instead of manually writing discrete keyframes and properties for all nine dots, the code generates them programmatically.

@for $d from 1 through 9 {
	&:nth-child(#{$d}) {
		@if $d % 2 == 0 {
			animation-name: dot-rotate;
		}
		// Procedural transform origins
		@if $d == 2 { transform-origin: 50% 200%; }
        // ...
		&::before {
			animation-name: dot-scale#{$d};
		}
	}
}

This loop iterates through each grid node, assigning mathematically specific transform origins, rotation timings, and scaling sequences based solely on its index. It compiles a static grid into a synchronized, pulsating matrix.

Feel

Mechanical yet organic. The staggered scaling creates a rhythmic, inward-to-outward flow. The supplementary expanding wave animations add a tactile burst effect, making the loading sequence feel less like an idle wait and more like observing a contained, precise physical reaction.