SVG Spinners

Collection of open-source SVG-based spinners (CSS & SMIL).

Demo

Usage

Each icon can be used either using IMG tag or as an inline SVG.

Each SVG has a fill set to currentColor. So, to change the color, you can either modify the fill/stroke directly:

<svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

or, you can set the parent's text color, and it will be automatically reflected in SVG:

<div class="text-purple-600">
  <svg ...>
</div>

Sources

• SamHerbert / SVG-Loaders
• n3r4zzurr0 / svg-spinners
• pasqualevitiello / Tumblr-Style-Cog-Spinners
• Various Codepens
• Various UIVerse Posts