Fully Customizable Spinning Wheel for Your *Loading* Screens

Sassy Spinner Loader is a pure CSS wheel based on SASS, a fully customizable spinner wheel for loading screens. This spinner wheel loader is supplied as a SASS alloy, for maximum flexibility and convenience.

css loader, loading animation css, css loading spinner example, best css loading spinner, css loader gif, css loading spinner, loading css

How to make use of it:

1. Install dependencies and run the build script.

$ npm install
$ npm build

2. Include the compiled stylesheet types.css on the web page.

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

3. Or straight import the sassy-spinner-loader into your sass file.

@use 'sassy-spinner-loader';

4. Create loading spinners without customized 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>

5. Create loading spinners with customized 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>

6. Customize the loading spinners by overriding the default choices within 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
);

Highly Customizable Loading Spinner Library, Sassy Spinner Loader Plugin/Github