Awesome
React SVG Spinners
A collection of SVG Spinners components for React.
Installation
npm install react-svg-spinners
Usage
import { Pulse } from "react-svg-spinners";
export default function App() {
return <Pulse />;
}
API
<SpinnerComponent />
Options
| Property | Options | Description |
|---|---|---|
| width | string, number | Specifies the width of the spinner |
| height | string, number | Specifies the height of the spinner |
| color | string | Color of the spinner |
| dur | string, number | Duration of spinner animation |
Preview
<table> <tr> <th>Preview</th> <th>Component Name</th> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/12-dots-scale-rotate.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/12-dots-scale-rotate-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/12-dots-scale-rotate-black-36.svg" /></picture ></a> </td> <td>TwelveDotsScaleRotate</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/180-ring-with-bg.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/180-ring-with-bg-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/180-ring-with-bg-black-36.svg" /></picture ></a> </td> <td>OneEightyWithBg</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/180-ring.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/180-ring-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/180-ring-black-36.svg" /></picture ></a> </td> <td>OneEightyRing</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/270-ring-with-bg.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/270-ring-with-bg-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/270-ring-with-bg-black-36.svg" /></picture ></a> </td> <td>TwoSeventyWithBg</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/270-ring.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/270-ring-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/270-ring-black-36.svg" /></picture ></a> </td> <td>TwoSeventyRing</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-bounce.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-bounce-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-bounce-black-36.svg" /></picture ></a> </td> <td>ThreeDotsBounce</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-fade.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-fade-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-fade-black-36.svg" /></picture ></a> </td> <td>ThreeDotsFade</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-moving.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-moving-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-moving-black-36.svg" /></picture ></a> </td> <td>ThreeDotsMoving</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-rotate.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-rotate-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-rotate-black-36.svg" /></picture ></a> </td> <td>ThreeDotsRotate</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-scale-middle.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-scale-middle-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-scale-middle-black-36.svg" /></picture ></a> </td> <td>ThreeDotsScaleMiddle</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/3-dots-scale.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-scale-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/3-dots-scale-black-36.svg" /></picture ></a> </td> <td>ThreeDotsScale</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/6-dots-rotate.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-rotate-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-rotate-black-36.svg" /></picture ></a> </td> <td>SixDotsRotate</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/6-dots-scale-middle.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-scale-middle-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-scale-middle-black-36.svg" /></picture ></a> </td> <td>SixDotsScaleMiddle</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/6-dots-scale.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-scale-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/6-dots-scale-black-36.svg" /></picture ></a> </td> <td>SixDotsScale</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/90-ring-with-bg.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-with-bg-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-with-bg-black-36.svg" /></picture ></a> </td> <td>NinetyRingWithBg</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/90-ring.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-black-36.svg" /></picture ></a> </td> <td>NinetyRing</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bars-fade.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-fade-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-fade-black-36.svg" /></picture ></a> </td> <td>BarsFade</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bars-rotate-fade.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-rotate-fade-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-rotate-fade-black-36.svg" /></picture ></a> </td> <td>BarsRotateFade</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bars-scale-fade.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-fade-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-fade-black-36.svg" /></picture ></a> </td> <td>BarsScaleFade</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bars-scale-middle.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-middle-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-middle-black-36.svg" /></picture ></a> </td> <td>BarsScaleMiddle</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bars-scale.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bars-scale-black-36.svg" /></picture ></a> </td> <td>BarsScale</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/blocks-scale.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-scale-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-scale-black-36.svg" /></picture ></a> </td> <td>BlockScale</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/blocks-shuffle-2.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-shuffle-2-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-shuffle-2-black-36.svg" /></picture ></a> </td> <td>BlocksShuffleTwo</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/blocks-shuffle-3.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-shuffle-3-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-shuffle-3-black-36.svg" /></picture ></a> </td> <td>BlockShuffleThree</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/blocks-wave.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-wave-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/blocks-wave-black-36.svg" /></picture ></a> </td> <td>BlocksWave</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/bouncing-ball.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bouncing-ball-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/bouncing-ball-black-36.svg" /></picture ></a> </td> <td>BouncingBall</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/clock.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/clock-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/clock-black-36.svg" /></picture ></a> </td> <td>Clock</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/dot-revolve.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/dot-revolve-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/dot-revolve-black-36.svg" /></picture ></a> </td> <td>DotRevolve</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/eclipse-half.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/eclipse-half-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/eclipse-half-black-36.svg" /></picture ></a> </td> <td>EclipeHalf</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/eclipse.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/eclipse-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/eclipse-black-36.svg" /></picture ></a> </td> <td>Eclipse</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/gooey-balls-1.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/gooey-balls-1-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/gooey-balls-1-black-36.svg" /></picture ></a> </td> <td>GoeeyBallsOne</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/gooey-balls-2.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/gooey-balls-2-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/gooey-balls-2-black-36.svg" /></picture ></a> </td> <td>GooeyBallsTwo</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-2.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-2-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-2-black-36.svg" /></picture ></a> </td> <td>PulseTwo</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-3.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-3-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-3-black-36.svg" /></picture ></a> </td> <td>PulseThree</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-multiple.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-multiple-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-multiple-black-36.svg" /></picture ></a> </td> <td>PulseMultiple</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-ring.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-ring-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-ring-black-36.svg" /></picture ></a> </td> <td>PulseRing</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-rings-2.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-2-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-2-black-36.svg" /></picture ></a> </td> <td>PulseRingsTwo</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-rings-3.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-3-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-3-black-36.svg" /></picture ></a> </td> <td>PulseRingsThree</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse-rings-multiple.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-multiple-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-rings-multiple-black-36.svg" /></picture ></a> </td> <td>PulseRingsMultiple</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/pulse.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/pulse-black-36.svg" /></picture ></a> </td> <td>Pulse</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/tadpole.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/tadpole-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/tadpole-black-36.svg" /></picture ></a> </td> <td>Tadpole</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/wifi-fade.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wifi-fade-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wifi-fade-black-36.svg" /></picture ></a> </td> <td>WifiFade</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/wifi.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wifi-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wifi-black-36.svg" /></picture ></a> </td> <td>Wifi</td> </tr> <tr> <td> <a href="https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg/wind-toy.svg" ><picture ><source media="(prefers-color-scheme: dark)" srcset=" https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wind-toy-white-36.svg " /> <img src="https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/wind-toy-black-36.svg" /></picture ></a> </td> <td>WindToy</td> </tr> </table>License
MIT (c) 2022 Ephraim Atta-Duncan