Spinner libraries implemented as native web components
npm install wc-spinners
Web Component implementations of
- Epic Spinners by EpicMax
- React Spinners by davidhu2000
- React Spinners CSS by JoshK2
yarn add wc-spinners
OR
npm i --save wc-spinners
``js`
import 'wc-spinners';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);
or for a specific spinner
`js
import 'wc-spinners/dist/atom-spinner.js';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);
`
`html
`
or for a specific spinner
`html
`
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)
`html`
duration="1"
size="60"
>
`html
`
NOTE: count is not supported by css variables
Default color: #ff1d5e
| Spinner | size | duration | count |
| ---------------------------------: | :--: | :------: | :---: |
| atom-spinner | 60 | 1 |65
| breeding-rhombus-spinner | | 2 | 3 |15
| circles-to-rhombuses-spinner | | 1.2 |64
| fingerprint-spinner | | 1.5 |70
| flower-spinner | | 2.5 |50
| fulfilling-bouncing-circle-spinner | | 4 |50
| fulfilling-square-spinner | | 4 |60
| half-circle-spinner | | 1 |15
| hollow-dots-spinner | | 1 | 3 |35
| intersecting-cirlces-spinner | | 1.2 |15
| looping-rhombuses-spinner | | 2.5 |55
| orbit-spinner | | 1.2 |70
| pixel-spinner | | 2 |60
| radar-spinner | | 2 |65
| scaling-squares-spinner | | 1.25 |10
| self-fulfilling-square-spinner | | 6 |65
| semipolar-spinner | | 2 |60
| spring-spinner | | 3 |65
| swapping-squares-spinner | | 1 |60
| trinity-rings-spinner | | 1.5 |
Default color: #36d7b7
| Spinner | size | height | width | radius | margin |
| -------------------: | :--: | :----: | :---: | :----: | :----: |
| bar-spinner | | 4 | 100 | |15
| beat-spinner | | | | | 2 |60
| bounce-spinner | |60
| circle-spinner | |15
| climbing-box-spinner | |35
| clip-spinner | |60
| dot-spinner | |15
| fade-spinner | | | 5 | 10 |15
| grid-spinner | | | | | 2 |50
| hash-spinner | |60
| moon-spinner | |25
| pacman-spinner | | | | | 2 |15
| propagate-spinner | |15
| pulse-spinner | | | | | 2 |60
| ring-spinner | |15
| rise-spinner | | | | | 2 |15
| rotate-spinner | | | | | 5 |35
| scale-spinner | | | 4 | 2 | 2 |20
| skew-spinner | |50
| square-spinner | |15
| sync-spinner | | | | | 2 |
Default color: #7f58af
| Spinner | size |
| -------------------: | :--: |
| rsc-circle-spinner | 64 |80
| 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 |
| roller-spinner | |
| spinner-spinner | |