# dj-spinners 💫 > Pure SVG loading spinners for Django. ## Installation 🤘 1. `uv add dj-spinners` OR `pip install dj-spinners` 2. Add to `INSTALLED_APPS` in `settings.py` ```python INSTALLED_APPS [ ... "dj_spinners", ] ``` 3. Use it in your templates ```html {% load dj_spinners %} {% spinner '3-dots-bounce' %} ```  NOTE: Most spinners are designed to fit within a 24 x 24 dp view box, though some (like bars) may have different aspect ratios. All previews below are scaled to a height of 24px. ## Spinners 🤩 ### Rings
| Name | Preview | Size in bytes |
|---|---|---|
| 180-ring-with-bg |
|
499 |
| 180-ring |
|
400 |
| 270-ring-with-bg |
|
549 |
| 270-ring |
|
450 |
| 90-ring-with-bg |
|
493 |
| 90-ring-with-gradient |
|
493 |
| 90-ring |
|
394 |
| oval |
|
464 |
| pulse-ring |
|
422 |
| pulse-rings-2 |
|
442 |
| pulse-rings-3 |
|
645 |
| pulse-rings-multiple |
|
649 |
| ring-resize |
|
597 |
| rings |
|
1185 |
| Name | Preview | Size in bytes |
|---|---|---|
| 12-dots-scale-rotate |
|
1435 |
| 3-dots-bounce |
|
593 |
| 3-dots-fade |
|
442 |
| 3-dots-move |
|
571 |
| 3-dots-rotate |
|
379 |
| 3-dots-scale-middle |
|
401 |
| 3-dots-scale |
|
431 |
| 4-dots-gooey |
|
786 |
| 4-dots-rotate |
|
777 |
| 6-dots-rotate |
|
915 |
| 6-dots-scale-middle |
|
260 |
| 6-dots-scale |
|
252 |
| 8-dots-rotate-scale |
|
291 |
| 8-dots-rotate |
|
506 |
| dot-revolve |
|
366 |
| Name | Preview | Size in bytes |
|---|---|---|
| bars-fade |
|
424 |
| bars-rotate-fade |
|
942 |
| bars-scale-fade |
|
460 |
| bars-scale-middle |
|
748 |
| bars-scale |
|
742 |
| bars |
|
1760 |
| horizontal-bar |
|
831 |
| Name | Preview | Size in bytes |
|---|---|---|
| blocks-scale |
|
1074 |
| blocks-shuffle-2 |
|
465 |
| blocks-shuffle-3 |
|
568 |
| blocks-shuffle-4 |
|
3658 |
| blocks-shuffle-5 |
|
3554 |
| blocks-wave |
|
2082 |
| Name | Preview | Size in bytes |
|---|---|---|
| heart-pulse-2 |
|
414 |
| heart-pulse-3 |
|
444 |
| heart-pulse |
|
628 |
| hearts |
|
1183 |
| pulse-2 |
|
166 |
| pulse-3 |
|
166 |
| pulse-multiple |
|
170 |
| pulse |
|
166 |
| Name | Preview | Size in bytes |
|---|---|---|
| cog01 |
|
2461 |
| cog02 |
|
2693 |
| cog03 |
|
2948 |
| cog04 |
|
3956 |
| cog05 |
|
3359 |
| cog06 |
|
3387 |
| cog07 |
|
2050 |
| cog08 |
|
2197 |
| cog09 |
|
2255 |
| cog10 |
|
1520 |
| cog11 |
|
1652 |
| cog12 |
|
1524 |
| cog13 |
|
1400 |
| cog14 |
|
1497 |
| cog15 |
|
1393 |
| cog16 |
|
1512 |
| cog17 |
|
1359 |
| cog18 |
|
1267 |
| cog19 |
|
3328 |
| cog20 |
|
3552 |
| cog21 |
|
2576 |
| cog22 |
|
1387 |
| cog23 |
|
1387 |
| cog24 |
|
1177 |
| Name | Preview | Size in bytes |
|---|---|---|
| loader-wifi |
|
1340 |
| loader1 |
|
1499 |
| loader10 |
|
361 |
| loader2 |
|
696 |
| loader3 |
|
411 |
| loader4 |
|
546 |
| loader5 |
|
667 |
| loader6 |
|
494 |
| loader7 |
|
966 |
| loader8 |
|
944 |
| loader9 |
|
710 |
| Name | Preview | Size in bytes |
|---|---|---|
| audio |
|
986 |
| ball-triangle |
|
1116 |
| bouncing-ball |
|
413 |
| circle-fade |
|
2020 |
| circles |
|
1676 |
| clock |
|
521 |
| eclipse-half |
|
353 |
| eclipse |
|
347 |
| gooey-balls-1 |
|
704 |
| gooey-balls-2 |
|
963 |
| grid |
|
1606 |
| jump |
|
2848 |
| pacman |
|
1560 |
| puff |
|
955 |
| spinner-double |
|
2250 |
| spinner-multiple-2 |
|
1941 |
| spinner-multiple |
|
733 |
| spinner |
|
1100 |
| spinning-circles |
|
1660 |
| square |
|
422 |
| tadpole |
|
366 |
| tail-spin |
|
598 |
| wifi-fade |
|
891 |
| wifi |
|
901 |
| wind-toy |
|
1275 |