scss-loading-animations
v1.0.1
Published
A set of SCSS mixins for single element loaders and spinners
Downloads
195
Maintainers
Readme
SCSS-Loading-Animations
A set of SCSS mixins for single element loaders and spinners
Getting started
npm install scss-loading-animations
OR
- Download the latest release.
- Copy
src
folder to your project. - Import
loaders.scss
.
@import "./src/loaders";
Usage
Create a div with a class name of your choosing.
<div class="your-loader"></div>
In the SCSS for your class, include a mixin for a given loader. All loader examples are numbered. These numbers map to the mixin class name. For example, if you want to use loader01 from the examples page:
.your-loader {
@include loader01;
}
Defaults
Default values for the loaders are in _variables.scss
.
$loader-color: #0052ec;
$loader-size: 56px;
$loader-height: 20px;
$loader-border-size: 8px;
$loader-gap: 12px;
$loader-animation-duration: 1s;
You can override these default values in the mixin call:
@include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);
All loaders can be also aligned to center, while including the mixin with parameter $align
. $align: center
is just for x axis, $align: middle
is for both axes.
MIXIN PARAMETERS
Parameter | Type | Default value |
------------ | ------------- | ------------- |
$size
| Number | $loader-size
|
$height
| Number | $loader-height
|
$border-size
| Number | $loader-border-size
|
$color
| Color | $loader-color
|
$duration
| Time | $loader-animation-duration
|
$gap
| Number | $loader-gap
|
$align
| Keyword | null
|
NOTE: Some loaders may not need $height
and $gap
parameters.
Performance issues
Some loaders which are using box-shadow
for animation may be causing high cpu usage and lag, I'll need to look into more details and fix it, if it's possible.
ATTRIBUTION
This project is a continuation from SpinThatShit, which is no longer being maintained according to the author.