You can view the spinners right now at https://rinminase.github.io/scss-spinners/
-
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>
-
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.
ReactandAngular) you can shorten it to:@import "~scss-spinners/spinners";
As
~resolves the import from anode_modulepath. -
Usage is as simple as
<div class="spinner round"></div>
To import only a specific spinner:
@import "~scss-spinners/components/balls";The example above would only import balls spinner.
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";-
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
npmone. -
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 buildNote: 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.
.
├── spinners.scss # Main stylesheet
├── globals.scss # Globals stylesheet
├── index.html # Demo page
├── .circleci/ # CircleCI deployment
├── components/ # Specific spinner stylesheets
└── dist/ # Stylesheets built to CSS
spinner.scssimports all specific spinner stylesheets_{spinner}.scssimportsvariables.scss,globals.scssand contains styles for the specific spinner
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 |
Sassy CSS (SCSS) - CSS Pre-processor
NodeJS - Environment
Circle CI - Continuous Integration (CI) service
Semantic Release📦🚀 - Releasing strategy
This is based from Webkul's CSSPIN made in SCSS for projects looking for SCSS spinners or loaders.