scss-spinners

v2.1.3

Published

2 years ago

SCSS Spinners and Loaders based on webkul's csspin

Downloads

291

0High
0Medium
0Low

rinminase

sass-spinner scss-spinner css-spinner spinner scss sass node-sass

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 |

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.