Web Component implementations of epic-spinners by EpicMax
npm install --save wc-epic-spinners
OR
yarn add wc-epic-spinners
import 'wc-epic-spinners';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);or for a specific spinner
import 'wc-epic-spinners/dist/AtomSpinner.js';
const spinner = document.createElement('atom-spinner');
document.body.append(spinner);<body>
<atom-spinner></atom-spinner>
<script src="wc-epic-spinners.js"></script>
</body>or for a specific spinner
<body>
<atom-spinner></atom-spinner>
<script src="wc-epic-spinners/dist/AtomSpinner.js"></script>
</body>You can easily configure a spinner's size, color, and animation speed by either setting an attribute on the spinner element or by assigning a value to a corresponding css variable.
<atom-spinner
color="#ff1d5e"
duration="1"
size="60"
></atom-spinner><style>
:root {
--atom-spinner-color: #ff1d5e;
--atom-spinner-duration: 1s;
--atom-spinner-size: 60px;
}
</style>
<atom-spinner></atom-spinner><atom-spinner
color="#ff1d5e"
duration="1"
size="60"
></atom-spinner>
<breeding-rhombus-spinner
color="#ff1d5e"
duration="2"
size="65"
></breeding-rhombus-spinner>
<circles-to-rhombuses-spinner
color="#ff1d5e"
count="3"
duration="1.2"
size="15"
></circles-to-rhombuses-spinner>
<fingerprint-spinner
color="#ff1d5e"
duration="1.5"
size="64"
></fingerprint-spinner>
<flower-spinner
color="#ff1d5e"
duration="2.5"
size="70"
></flower-spinner>
<fulfilling-bouncing-circle-spinner
color="#ff1d5e"
duration="4"
size="60"
></fulfilling-bouncing-circle-spinner>
<fulfilling-square-spinner
color="#ff1d5e"
duration="4"
size="50"
></fulfilling-square-spinner>
<half-circle-spinner
color="#ff1d5e"
duration="1"
size="60"
></half-circle-spinner>
<hollow-dots-spinner
color="#ff1d5e"
count="3"
duration="1"
size="15"
></hollow-dots-spinner>
<intersecting-circles-spinner
color="#ff1d5e"
duration="1.2"
size="70"
></intersecting-circles-spinner>
<looping-rhombuses-spinner
color="#ff1d5e"
duration="2.5"
size="15"
></looping-rhombuses-spinner>
<orbit-spinner
color="#ff1d5e"
duration="1.2"
size="55"
></orbit-spinner>
<pixel-spinner
color="#ff1d5e"
duration="2"
size="70"
></pixel-spinner>
<radar-spinner
color="#ff1d5e"
duration="2"
size="60"
></radar-spinner>
<scaling-squares-spinner
color="#ff1d5e"
duration="1.25"
size="65"
></scaling-squares-spinner>
<self-building-square-spinner
color="#ff1d5e"
duration="6"
size="40"
></self-building-square-spinner>
<semipolar-spinner
color="#ff1d5e"
duration="2"
size="65"
></semipolar-spinner>
<spring-spinner
color="#ff1d5e"
duration="3"
size="60"
></spring-spinner>
<swapping-squares-spinner
color="#ff1d5e"
duration="1"
size="65"
></swapping-squares-spinner>
<trinity-rings-spinner
color="#ff1d5e"
duration="1.5"
size="66"
></trinity-rings-spinner>- Star the repo ⭐
- Create pull requests
MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent