scss-spinners
v2.1.3
Published
SCSS Spinners and Loaders based on webkul's csspin
Downloads
182
Maintainers
Readme
Introduction
Demo
You can view the spinners right now at https://rinminase.github.io/scss-spinners/
Getting Started
Using this package as CSS from a CDN
You can use JSDelivr CDN and place it on your main HTML page
<head> ... <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/scss-spinners /> </head>
Usage is as simple as
<div class="spinner round"></div>
Using this package as SCSS
Install the package from npm
npm install scss-spinners
Import the main stylesheet of this project to the main stylesheet of your project
@import "./node_modules/scss-spinners/spinners"
If you are using a Webpack loader (e.g.
React
andAngular
) you can shorten it to:@import "~scss-spinners/spinners";
As
~
resolves the import from anode_module
path.Usage is as simple as
<div class="spinner round"></div>
Specific imports (Tree-shaking) in SCSS
To import only a specific spinner:
@import "~scss-spinners/components/balls";
The example above would only import balls
spinner.
Overriding variables in SCSS
Variables is located at /node_modules/scss-spinners/variables.scss
.
The table below lists the possible variables which can be overriden.
Spinners
| Task | Description |
| --------------------- | ------------------------------------------------------------------------- |
| $spinner-color
| Sets the primary color of the spinner (default: #28A745
) |
| $spinner-accent
| Sets the secondary or accent color of the spinner (default: #71C585
) |
| $spinner-size
| Sets the size of the spinner (default: 60px
) |
Loader
| Task | Description |
| --------------------- | ------------------------------------------------------------------------- |
| $loader-color
| Sets the primary color of the loader (default: #28A745
) |
| $loader-background
| Sets the secondary or background color of the loader (default: #EDEDED
) |
| $loader-size
| Sets the size of the loader (default: 3px
) |
| $loader-speed
| Sets the speed of the loader in seconds (default: 2s
) |
To override, on the stylesheet before importing spinners.scss
:
$spinner-color: blue;
$spinner-size: 10px;
@import "~scss-spinners/spinners";
Building the project as CSS
Download the latest Node version. This is marked as
<version number> Current
. Install it on your machine.(Optional) Download Yarn. This is a faster package manager than the default
npm
one.Clone the project
git clone https://github.com/RinMinase/scss-spinners.git cd scss-spinners
Install the dependencies then run the project
npm install npm build
Note: If you have installed Yarn, run these instead:
yarn install yarn build
Navigate to the
dist/
folder in the root directory. Inside this folder is your css file for usage.
Project Structure
.
├── spinners.scss # Main stylesheet
├── globals.scss # Globals stylesheet
├── index.html # Demo page
├── .circleci/ # CircleCI deployment
├── components/ # Specific spinner stylesheets
└── dist/ # Stylesheets built to CSS
How the structure works?
spinner.scss
imports all specific spinner stylesheets_{spinner}.scss
importsvariables.scss
,globals.scss
and contains styles for the specific spinner
Project tasks
Task automation is based on Yarn scripts or NPM scripts.
| Task | Description |
| -------------------------------- | --------------------------------------------------------------- |
| npm start
or yarn start
| Builds the scss files to dist/
to a css file |
| npm build
or yarn build
| Builds the scss files to dist/
to a minified css file |
| npm run watch
or yarn watch
| Builds the scss files to dist/
with file watching on changes |
Built with
- Sassy CSS (SCSS) - CSS Pre-processor
- NodeJS - Environment
- Circle CI - Continuous Integration (CI) service
- Semantic Release📦🚀 - Releasing strategy
Credits
This is based from Webkul's CSSPIN made in SCSS for projects looking for SCSS spinners or loaders.