What is svg-spinners?

This repository is a collection of animated loading spinner graphics in SVG format. SVG is a file format for vector graphics, meaning the images are described as shapes and paths rather than pixels, so they scale cleanly to any size. These spinners are the kind of small animated indicators you see in websites and apps while something is loading. All of the spinners are sized to fit a 24 by 24 dp viewbox, which is a standard size for icons. The collection includes rings, dots, and other common spinner patterns, with variations in how they animate: some spin, some bounce, some fade in and out. Each spinner is provided in two versions. The CSS version uses web stylesheet animations to drive the movement, while the SMIL version uses animation instructions built directly into the SVG file itself. The practical difference is that CSS animations start playing while the page is still loading, whereas SMIL animations wait until the page has fully loaded before starting. There are also some browser compatibility notes: in browsers based on WebKit, spinners displayed via an image tag may look slightly off at non-standard zoom levels, but using them inline in HTML works correctly across browsers. The README shows a preview table of every spinner with links to download either the CSS or SMIL version. It also explains how to install the collection via npm if you are working on a JavaScript project, and includes instructions for using the spinners as inline SVG in HTML, as image tags, as React components, and with Vue.js. Color can be changed by setting the text color in CSS since the spinners inherit that property by default. This is a design resource aimed at web and app developers who need a ready-made loading indicator without building one themselves.