What it does
SVG Spinners is an MIT-licensed collection of rings, dots, bars, blocks and other animated loading indicators. Its examples compare CSS and SMIL versions.
SVG Spinners lets you compare rings, dots, bars and other loading patterns before taking the SVG file you need. The preview links CSS and SMIL versions and shows their file sizes. Each drawing uses a 24-pixel view box with padding around a 22-pixel live area.
Choose the animation route alongside the shape. The project documents that SMIL starts after page loading, while CSS can animate during loading. It also warns about WebKit zoom behavior when either version is referenced as an image and recommends inline SVG for that case.
These are individual assets rather than a complete loading-state component. Add the selected drawing to the surrounding status control and handle its label and motion preferences there. The collection is free under MIT; its public SVG files need no product account. Preserve the copyright and permission notice when sharing copies.
Strengths
- CSS and SMIL variants let developers choose an animation approach.
- The preview groups patterns and exposes their file sizes.
Watch out for
- The documented animation timing differs between CSS and SMIL.
- Image-referenced animations have a documented WebKit zoom issue.
Best for
- Web loading states
- Developers comparing small animated SVG indicators
Sources
- SVG Spinners README (Oct 27, 2026)
- SVG Spinners MIT License (Oct 27, 2026)