1.1.1 • Published 4 years ago
wc-spinners v1.1.1
Web Component Spinners
Web Component implementations of
Installation
yarn add wc-spinners
OR
npm i --save wc-spinners
Usage
Javascript
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);HTML
<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>Configuration
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)
Attributes
<atom-spinner
color="#ff1d5e"
duration="1"
size="60"
></atom-spinner>CSS Variables (CSS Custom Properties)
<style>
atom-spinner {
--atom-spinner__color: #ff1d5e;
--atom-spinner__duration: 1s;
--atom-spinner__size: 60px;
}
</style>
<atom-spinner></atom-spinner>Attribute list
Epic Spinners
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 |
React Spinners
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 |
React Spinners CSS
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 |
Support?
- Star the repo :star:
- Create pull requests
License
MIT license.