SVG Spinners

46 animated SVG loading spinners in both CSS and SMIL variants. Lightweight, scalable, and customizable on a 24x24 grid. MIT licensed and ready to use inline or via img tags.

SVG Spinners is a popular open-source collection of 46 animated SVG loading indicators created by Utkarsh Verma (n3r4zzurr0). Released in June 2022, the project quickly gained traction in the developer community and has accumulated over 6,900 stars and 850 forks on GitHub, making it one of the most popular spinner libraries available.\n\nEvery spinner is designed on a 24x24 dp (density-independent pixel) viewbox with the main content fitting inside a 22 dp live area and 1 dp padding on each side. This consistent grid ensures all spinners work interchangeably at any size. Each spinner comes in two animation variants: SVG + CSS (using CSS keyframe animations embedded in a style tag within the SVG) and SVG + SMIL (using native SVG animation elements like animate and animateTransform). The CSS variants begin playing immediately as the page loads, while SMIL animations only start after the page has fully loaded - an important distinction for loading indicators.\n\nThe collection includes a diverse range of spinner styles: circular rotations (90-ring, 180-ring, 270-ring variants with and without backgrounds), dot patterns (3-dots-bounce, 3-dots-fade, 3-dots-move, 3-dots-rotate, 3-dots-scale, 3-dots-scale-middle), bar animations (bars-fade, bars-rotate-fade, bars-scale, bars-scale-fade, bars-scale-middle), block shuffles (blocks-shuffle-2, blocks-shuffle-3, blocks-wave), pulsing shapes (pulse, pulse-2, pulse-3, pulse-rings, pulse-multiple, puff, eclipse, eclipse-half), and utility spinners (clock, gooey-balls, bouncing-ball, tadpole, wifi, wifi-fade, wind-toy). This variety covers virtually every common loading state pattern used in modern web and mobile applications.\n\nAll spinners use currentColor for their fill or stroke attributes, which means they automatically inherit the text color of their parent element. This makes color customization trivial - just set the parent CSS color property, or override fill/stroke directly on the SVG element. Spinners can be used either as inline SVG (recommended for immediate animation start and full CSS control) or referenced via an img tag for simpler integration.\n\nThe project has no npm package or versioned releases - it is distributed directly through the GitHub repository. However, the spinners are available on Iconify (the svg-spinners icon set), which provides integration with React, Vue, Svelte, and other frameworks. The collection has been featured internationally, with coverage in Codrops Weekly Collective #717 and articles in French, English, Japanese, and Russian publications.\n\nUtkarsh Verma is an independent developer known for creative SVG and Canvas experiments, including canvas-liquid-effect, range-slider-input (a lightweight range slider library), and video-frames (client-side video frame extraction). His personal site is n3r4zzurr0.in.