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.