react-svg-spinners - GitLite

KO | EN

gitlite — search

#hacktoberfest #go #golang #machine-learning #linux #docker #nodejs #macos #awesome #cli #awesome-list #pytorch #ios #openai

react-svg-spinners

(★ 87)

A React Component Library for SVG Spinners

File Explorer

Download Latest Version (.zip)

- - BarsFade.tsx
  - BarsRotateFade.tsx
  - BarsScale.tsx
  - BarsScaleFade.tsx
  - BarsScaleMiddle.tsx
  - BlocksScale.tsx
  - BlocksShuffleThree.tsx
  - BlocksShuffleTwo.tsx
  - BlocksWave.tsx
  - BouncingBall.tsx
  - Clock.tsx
  - DotRevolve.tsx
  - Eclipse.tsx
  - EclipseHalf.tsx
  - GooeyBallsOne.tsx
  - GooeyBallsTwo.tsx
  - NinetyRing.tsx
  - NinetyRingWithBg.tsx
  - OneEightyRing.tsx
  - OneEightyRingWithBg.tsx
  - Pulse.tsx
  - PulseMultiple.tsx
  - PulseRing.tsx
  - PulseRingsMultiple.tsx
  - PulseRingsThree.tsx
  - PulseRingsTwo.tsx
  - PulseThree.tsx
  - PulseTwo.tsx
  - SixDotsRotate.tsx
  - SixDotsScale.tsx
  - SixDotsScaleMiddle.tsx
  - Tadpole.tsx
  - ThreeDotsBounce.tsx
  - ThreeDotsFade.tsx
  - ThreeDotsMoving.tsx
  - ThreeDotsRotate.tsx
  - ThreeDotsScale.tsx
  - ThreeDotsScaleMiddle.tsx
  - TwelveDotsScaleRotate.tsx
  - TwoSeventyRing.tsx
  - TwoSeventyRingWithBg.tsx
  - Wifi.tsx
  - WifiFade.tsx
  - WindToy.tsx
- index.ts
- util.ts
.gitignore
.npmignore
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json
tsup.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/ephraimduncan/react-svg-spinners

Downloads the entire project code from GitHub to your computer.

cd react-svg-spinners

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-svg-spinners

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React SVG Spinners

> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.

## Installation

```sh
npm install react-svg-spinners
```

## Usage

```js
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](https://github.com/dephraiim/react-svg-spinner/blob/master/LICENSE) (c) 2022 Ephraim Atta-Duncan