Simple loading spinners in pure CSS.

Add CSS Loading Spinners to your project using your favorite package manager:

$ npm i --save css-loading-spinners

or:

$ yarn add css-loading-spinners

All spinners must be contained within a div with the cls-spinner class. Within this, place the div for the spinner itself.

<div class="cls-spinner">
  <div class="cls-circle cls-spin"></div>
</div>

For a list of all possible spinners, visit the demo page.

If you need to change the color, size, or margin of the spinner, these are adjustable by changing the relevent variables using CSS loaded after the CSS Loading Spinners CSS.

:root {
  /* default values below */
  --cls-color: #558B6E;
  --cls-sec-color: #EEEEEE;
  --cls-size: 5rem;
  --cls-margin: 1rem;
  --cls-speed: 2s; /* time halved for flip-flop and signal animation */
}

These variables can also be set using JavaScript.

var rootStyles = document.documentElement.style
rootStyles.setProperty('--cls-color', '#558B6E')
rootStyles.setProperty('--cls-sec-color', '#EEEEEE')
rootStyles.setProperty('--cls-size', '5rem')
rootStyles.setProperty('--cls-margin', '1rem')
rootStyles.setProperty('--cls-speed', '2s')

View a demo at https://susurrus-llc.github.io/css-loading-spinners.