Генератор спиннера на SVG

SVG is a vector format, so spinners stay perfectly sharp at any size and on any pixel density. File sizes are tiny (often a few hundred bytes), the colors can be changed via CSS at runtime, and the animation can be paused, resumed, or restyled without re-encoding the asset. GIFs, by contrast, are raster, larger, lossy at the edges, and locked to whatever colors and speed were baked in when the file was exported.

A determinate indicator shows real progress toward a known total, like a progress bar that fills from 0% to 100%. An indeterminate indicator simply tells the user that work is happening when the duration or progress cannot be measured — for example, while waiting for a network response. Most spinners (rotating circles, pulsing dots, ripples) are indeterminate; bar loaders can be either, depending on whether they show a moving slice or a filling fraction.

As a general usability guideline, do not show any indicator for actions that finish in under about 100 ms — the UI feels instant. Between roughly 100 ms and 1 second, a small inline indicator near the affected control is enough. Past 1 second, use a clear spinner. For waits longer than about 10 seconds, switch to a determinate progress indicator with a meaningful message, because users start losing confidence that the system is still working.

CSS animations target SVG elements the same way they target HTML elements: you write a keyframes rule and apply it via the animation property on a class. Common targets include rotate transforms for spins, opacity for fades, and stroke-dashoffset for the drawing effect on circles and lines. To make the rotation pivot at the visual center of a shape, set transform-origin to that point. Animations declared inside a style element inside the SVG itself stay scoped to that document, which is why a self-contained SVG works when dropped into any page.

Mark the spinner element with role=status (or role=progressbar for determinate progress) so assistive technology treats updates as a live region. Provide a short, meaningful aria-label such as Loading or Saving so the purpose is announced, and avoid relying on color alone to convey state. For determinate progress, also set aria-valuenow, aria-valuemin, and aria-valuemax so the percentage is announced as it updates.