Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

css-loading-spinners

nai88840MIT0.2.0

Pure CSS spinners

spinner, spinners, css spinner, css spinners, css, loading, ui

readme

CSS Loading Spinners

Simple loading spinners in pure CSS.

NPM License

Installation

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

$ npm i --save css-loading-spinners

or:

$ yarn add css-loading-spinners

Usage

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.

Customization

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')

Demo

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

changelog

Changelog

All notable changes to this project will be documented in this file.

The format of this changelog is based on Keep a Changelog and this project adheres to Semantic Versioning.

Unreleased

v0.2.0 - 2019-02-07

Added 0.2.0

  • Add links for badges on README.
  • Add info to a header at the top of the CSS file.
  • Add a CSS variable for the secondary (gray) color.
  • Add usage and customization instructions to README.

Changed 0.2.0

  • Change --spinner-* variables to --cls-* variables.

Removed 0.2.0

  • Remove color-specific CSS variables.

v0.1.1 - 2019-02-04

Added 0.1.1

  • Add CODE_OF_CONDUCT.md.
  • Add LICENSE.
  • Add content to README.md.
  • Add this CHANGELOG.
  • Add -webkit- vendor prefix to keyframes and animations.
  • Add ring and rings spinners.
  • Add badges to README.

Changed 0.1.1

  • Change CSS variables so they can be overwritten.
    • Spinner color
    • Spinner size
    • Spinner margin
    • Spinner speed
  • Add cls- namespace to class names.

v0.1.0 - 2019-02-03

Added 0.1.0

  • Build first six spinners.