Awesome

Web Component Spinners

Web Component implementations of

Installation

yarn add wc-spinners

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.