# dj-spinners

> Pure SVG loading spinners for Django.

```html
{% load dj_spinners %}

{% spinner '3-dots-bounce' %}
```

![3 dots bounce](https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-bounce.svg)

## Spinners 🤩

<h3>Rings</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/90-ring.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/90-ring.svg">428</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/90-ring-with-bg.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/90-ring-with-bg.svg">531</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/180-ring.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/180-ring.svg">434</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/180-ring-with-bg.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/180-ring-with-bg.svg">537</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/270-ring.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/270-ring.svg">483</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/270-ring-with-bg.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/270-ring-with-bg.svg">586</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/ring-resize.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/ring-resize.svg">620</a></td>
   </tr>
</table>
<br />
<h3>Dots</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-bounce.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-bounce.svg">635</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-fade.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-fade.svg">482</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-move.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-move.svg">631</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-rotate.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-rotate.svg">409</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-scale.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-scale.svg">471</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/3-dots-scale-middle.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/3-dots-scale-middle.svg">422</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/6-dots-rotate.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/6-dots-rotate.svg">948</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/6-dots-scale.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/6-dots-scale.svg">1494</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/6-dots-scale-middle.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/6-dots-scale-middle.svg">1504</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/8-dots-rotate.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/8-dots-rotate.svg">535</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/12-dots-scale-rotate.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/12-dots-scale-rotate.svg">1693</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/dot-revolve.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/dot-revolve.svg">399</a></td>
   </tr>
</table>
<br />
<h3>Bars</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bars-fade.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bars-fade.svg">514</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bars-scale.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bars-scale.svg">895</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bars-scale-fade.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bars-scale-fade.svg">548</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bars-scale-middle.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bars-scale-middle.svg">825</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bars-rotate-fade.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bars-rotate-fade.svg">1150</a></td>
   </tr>
</table>
<br />
<h3>Blocks</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/blocks-scale.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/blocks-scale.svg">1182</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/blocks-shuffle-2.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/blocks-shuffle-2.svg">524</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/blocks-shuffle-3.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/blocks-shuffle-3.svg">646</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/blocks-wave.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/blocks-wave.svg">2457</a></td>
   </tr>
</table>
<br />
<h3>Pulses</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse.svg">301</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-2.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-2.svg">400</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-3.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-3.svg">499</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-multiple.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-multiple.svg">503</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-ring.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-ring.svg">461</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-rings-2.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-rings-2.svg">657</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-rings-3.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-rings-3.svg">853</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/pulse-rings-multiple.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/pulse-rings-multiple.svg">856</a></td>
   </tr>
</table>
<br />
<h3>Other</h3>
<table>
   <tr>
      <th>Preview</th>
      <th>Size in bytes</th>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/bouncing-ball.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/bouncing-ball.svg">453</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/clock.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/clock.svg">565</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/eclipse.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/eclipse.svg">377</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/eclipse-half.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/eclipse-half.svg">385</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/gooey-balls-1.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/gooey-balls-1.svg">774</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/gooey-balls-2.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/gooey-balls-2.svg">1064</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/tadpole.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/tadpole.svg">398</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/wifi.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/wifi.svg">999</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/wifi-fade.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/wifi-fade.svg">989</a></td>
   </tr>
   <tr>
      <td>
         <img src="https://raw.githubusercontent.com/adamghill/dj-spinners/refs/heads/main/src/dj_spinners/assets/svg/wind-toy.svg" />
      </td>
      <td><a href="https://github.com/adamghill/dj-spinners/blob/main/src/dj_spinners/assets/svg/wind-toy.svg">1321</a></td>
   </tr>
</table>

## Test 🧪

1. `uv install pip install -e .[dev]`
2. `just test`

## Inspiration 😍

- [svg-spinners](https://github.com/adamghill/dj-spinners)
