Web Component implementations of
yarn add wc-spinners
OR
npm i --save wc-spinners
import 'wc-spinners';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);or for a specific spinner
import 'wc-spinners/dist/atom-spinner.js';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);<body>
<atom-spinner></atom-spinner>
<script src="wc-spinners.js"></script>
</body>or for a specific spinner
<body>
<atom-spinner></atom-spinner>
<script src="wc-spinners/dist/atom-spinner.js"></script>
</body>You can easily configure a spinner's display by either setting an attribute on the spinner element or by assigning a value to a corresponding css variable.
Note: When setting an attribute the unit is implied (e.g. size="60" becomes 60px automatically). If you want to change the unit type, use css variables instead (--spinner__size: 60rem)
<atom-spinner
color="#ff1d5e"
duration="1"
size="60"
></atom-spinner><style>
atom-spinner {
--atom-spinner__color: #ff1d5e;
--atom-spinner__duration: 1s;
--atom-spinner__size: 60px;
}
</style>
<atom-spinner></atom-spinner>NOTE: count is not supported by css variables
Default color: #ff1d5e
| Spinner | size | duration | count |
|---|---|---|---|
| atom-spinner | 60 |
1 |
|
| breeding-rhombus-spinner | 65 |
2 |
3 |
| circles-to-rhombuses-spinner | 15 |
1.2 |
|
| fingerprint-spinner | 64 |
1.5 |
|
| flower-spinner | 70 |
2.5 |
|
| fulfilling-bouncing-circle-spinner | 50 |
4 |
|
| fulfilling-square-spinner | 50 |
4 |
|
| half-circle-spinner | 60 |
1 |
|
| hollow-dots-spinner | 15 |
1 |
3 |
| intersecting-cirlces-spinner | 35 |
1.2 |
|
| looping-rhombuses-spinner | 15 |
2.5 |
|
| orbit-spinner | 55 |
1.2 |
|
| pixel-spinner | 70 |
2 |
|
| radar-spinner | 60 |
2 |
|
| scaling-squares-spinner | 65 |
1.25 |
|
| self-fulfilling-square-spinner | 10 |
6 |
|
| semipolar-spinner | 65 |
2 |
|
| spring-spinner | 60 |
3 |
|
| swapping-squares-spinner | 65 |
1 |
|
| trinity-rings-spinner | 60 |
1.5 |
Default color: #36d7b7
| Spinner | size | height | width | radius | margin |
|---|---|---|---|---|---|
| bar-spinner | 4 |
100 |
|||
| beat-spinner | 15 |
2 |
|||
| bounce-spinner | 60 |
||||
| circle-spinner | 60 |
||||
| climbing-box-spinner | 15 |
||||
| clip-spinner | 35 |
||||
| dot-spinner | 60 |
||||
| fade-spinner | 15 |
5 |
10 |
||
| grid-spinner | 15 |
2 |
|||
| hash-spinner | 50 |
||||
| moon-spinner | 60 |
||||
| pacman-spinner | 25 |
2 |
|||
| propagate-spinner | 15 |
||||
| pulse-spinner | 15 |
2 |
|||
| ring-spinner | 60 |
||||
| rise-spinner | 15 |
2 |
|||
| rotate-spinner | 15 |
5 |
|||
| scale-spinner | 35 |
4 |
2 |
2 |
|
| skew-spinner | 20 |
||||
| square-spinner | 50 |
||||
| sync-spinner | 15 |
2 |
Default color: #7f58af
| Spinner | size |
|---|---|
| rsc-circle-spinner | 64 |
| default-spinner | 80 |
| dual-ring-spinner | 80 |
| ellipsis-spinner | 80 |
| facebook-spinner | 80 |
| rsc-grid-spinner | 80 |
| heart-spinner | 80 |
| hourglass-spinner | 80 |
| orbitals-spinner | |
| ouroboro-spinner | |
| rsc-ring-spinner | 80 |
| ripple-spinner | 80 |
| roller-spinner | |
| spinner-spinner |
- Star the repo ⭐
- Create pull requests
MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent