Design AtlasThe same indeterminate "still working" signal as a ring spinner, but because the arc's length itself grows and shrinks, it stays visually interesting longer than a ring that just spins at a constant rate. Once a task can report real progress, switch the same SVG circle to the determinate progress-ring instead.
Built with an SVG <circle> whose stroke-dasharray sets the full circumference, then a keyframe animates stroke-dashoffset to make the visible arc grow and shrink, while the wrapping container spins continuously with rotate. The overlap of changing length and rotation is what produces Material Design's signature loading animation.
Skip it for loads under 200ms, and prefer a skeleton for a long wait covering the whole screen. Give the wrapper role="status" and aria-live="polite", and hide the SVG with aria-hidden="true" since it's decorative. Under prefers-reduced-motion, you can simplify by freezing the arc length and keeping only a steady rotation.