Skip to content

craig-jennings/wc-spinners

Repository files navigation

Web Component Spinners

npm npm Netlify Status

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 ⭐
  • Create pull requests

License

MIT license.

About

Spinner libraries implemented as native web components

Resources

License

Stars

Watchers

Forks

Packages

No packages published