## Introduction
## Demo
You can view the spinners right now at [https://rinminase.github.io/scss-spinners/](https://rinminase.github.io/scss-spinners)
## Getting Started
### Using this package as CSS from a CDN
1. You can use [JSDelivr](https://www.jsdelivr.com/) CDN and place it on your main HTML page
```html
...
```
2. Usage is as simple as
```html
```
### Using this package as SCSS
1. Install the package from [npm](https://www.npmjs.com/package/scss-spinners)
```
npm install scss-spinners
```
2. Import the main stylesheet of this project to the main stylesheet of your project
```css
@import "./node_modules/scss-spinners/spinners"
```
If you are using a Webpack loader (e.g. `React` and `Angular`) you can shorten it to:
```css
@import "~scss-spinners/spinners";
```
As `~` resolves the import from a `node_module` path.
3. Usage is as simple as
```html
```
### Specific imports (Tree-shaking) in SCSS
To import only a specific spinner:
```scss
@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`:
```scss
$spinner-color: blue;
$spinner-size: 10px;
@import "~scss-spinners/spinners";
```
### Building the project as CSS
1. [Download](https://nodejs.org/en/) the latest Node version. This is marked as ` Current`. Install it on your machine.
2. _(Optional)_ [Download](https://yarnpkg.com/latest.msi) Yarn. This is a faster package manager than the default `npm` one.
3. Clone the project
```
git clone https://github.com/RinMinase/scss-spinners.git
cd scss-spinners
```
4. Install the dependencies then run the project
```
npm install
npm build
```
**Note:** If you have installed Yarn, run these instead:
```
yarn install
yarn build
```
5. 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](https://yarnpkg.com/lang/en/docs/cli/run/) or [NPM scripts](https://docs.npmjs.com/misc/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)](https://sass-lang.com/) - CSS Pre-processor
* [NodeJS](https://nodejs.org/) - Environment
* [Circle CI](https://circleci.com/) - Continuous Integration (CI) service
* [Semantic Release📦🚀](https://semantic-release.gitbook.io/) - Releasing strategy
## Credits
This is based from [Webkul's CSSPIN](https://github.com/webkul/csspin) made in SCSS for projects looking for SCSS spinners or loaders.
---
_Source: https://npm.io/package/scss-spinners · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
[NodeJS](https://nodejs.org/) - Environment
* 
[Circle CI](https://circleci.com/) - Continuous Integration (CI) service
* 
[Semantic Release📦🚀](https://semantic-release.gitbook.io/) - Releasing strategy
## Credits
This is based from [Webkul's CSSPIN](https://github.com/webkul/csspin) made in SCSS for projects looking for SCSS spinners or loaders.
---
_Source: https://npm.io/package/scss-spinners · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._