Author: | gabrielrf96 |
---|---|
Views Total: | 192 views |
Official Page: | Go to website |
Last Update: | August 24, 2021 |
License: | MIT |
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 );