Scss-spinners NPM

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 and Angular) you can shorten it to:
```
@import "~scss-spinners/spinners";
```
As ~ resolves the import from a node_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 imports variables.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