Highly Customizable Loading Spinner Library In Pure CSS/SASS

Preview:

Description:

A Pure CSS (SASS) library for creating highly customizable loading spinners.

How to use it:

1. Download the package.

2. Install dependencies and run the build script.

$ npm install
$ npm build

3. Include the compiled stylesheet styles.css on the page.

<link rel="stylesheet" href="styles.css" />

4. Or directly import the sassy-spinner-loader into your sass file.

@use 'sassy-spinner-loader';

5. Create loading spinners without custom CSS properties.

<article>
  <div class="legacy-spinner-loader"></div>
  <h1>Regular</h1>
</article>
<article>
  <div class="legacy-spinner-loader black"></div>
  <h1>Black</h1>
</article>
<article>
  <div class="legacy-spinner-loader fast"></div>
  <h1>Fast</h1>
</article>
<article>
  <div class="legacy-spinner-loader big"></div>
  <h1>Big</h1>
</article>
<article>
  <div class="legacy-spinner-loader slim"></div>
  <h1>Slim</h1>
</article>
<article>
  <div class="legacy-spinner-loader fixed-thickness"></div>
  <h1>Fixed thickness</h1>
</article>

6. Create loading spinners with custom CSS properties.

<article>
  <div class="spinner-loader"></div>
  <h1>Regular</h1>
</article>
<article>
  <div class="spinner-loader black"></div>
  <h1>Black</h1>
</article>
<article>
  <div class="spinner-loader fast"></div>
  <h1>Fast</h1>
</article>
<article>
  <div class="spinner-loader big"></div>
  <h1>Big</h1>
</article>
<article>
  <div class="spinner-loader slim"></div>
  <h1>Slim</h1>
</article>
<article>
  <div class="spinner-loader fixed-thickness"></div>
  <h1>Fixed thickness</h1>
</article>

7. Customize the loading spinners by overriding the default options in the mixin.

$defaultOptions: (
  thickness: auto,
  thicknessRatio: 0.125,
  speed: 1.25,
  fgColor: #008cff,
  bgColor: rgba(#828382, 0.25),
  position: relative,
  display: block,
  useCssVariables: true,
  defineAnimation: true
);