n3r4zzurr0/svg-spinners

★ 6,964SVGAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Loading spinners
      SVG format
      Two animation types
    Animation Types
      CSS animated
      SMIL animated
    Integration Options
      npm package
      React component
      Vue component
      Inline HTML
    Audience
      Web developers
      UI designers
      App builders

mindmap root((repo)) What it does Loading spinners SVG format Two animation types Animation Types CSS animated SMIL animated Integration Options npm package React component Vue component Inline HTML Audience Web developers UI designers App builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a polished loading spinner to a website or React app without designing one from scratch.

USE CASE 2

Install the npm package and import spinners as ready-made React or Vue components.

USE CASE 3

Embed an SVG spinner directly inline in HTML and change its color with a single CSS property.

USE CASE 4

Use SMIL-animated spinners in environments where CSS animations are blocked, such as certain email clients.

Tech stack

SVGCSSJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

License not specified in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to add an svg-spinners loading indicator to my React component that appears while data is fetching from an API.

Prompt 2

I am using svg-spinners in a Vue project. Walk me through installing the npm package and using a spinner component with a custom brand color.

Prompt 3

I want to use an svg-spinners spinner as an image tag in plain HTML. Which version should I pick, CSS or SMIL, and how do I control the color?

Prompt 4

How do I use svg-spinners in a Next.js project and ensure the spinner color matches my design system's primary color token?

Open on GitHub → Explain another repo

← n3r4zzurr0 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.