scss-mixins-spinners
v3.0.0
Published
Performant CSS+HTML spinners implemented as SCSS mixins
Downloads
4
Readme
scss-mixins-spinners
Performant CSS+HTML spinners implemented as SCSS mixins. See here for examples.
Motivation
I wanted a choice of a few spinners to use on websites, spinners that use only transform and opacity animations so the browser needs to only perform compositing to update the page.
I also wanted to be able to use the spinners with and without a JavaScript front-end framework. As a result, these spinners require the HTML markup for them to exist via some other means, rather than this package creating the markup itself.
Installation
Yarn:
yarn add scss-mixins-spinners
Npm:
npm install scss-mixins-spinners
Usage
The spinner mixins are in individual files in the
scss-mixins-spinners/scss
directory in this package.
In your scss
file, import the mixin file for the spinner you want to
create an instance of:
// either like this...
@import "scss-mixins-spinners/scss/segmented-spinner.scss";
// ...or you might need to use an initial tilde:
@import "~scss-mixins-spinners/scss/segmented-spinner.scss";
Now you can make use of the imported mixin to create a spinner that is styled appropriately:
#my-spinner {
@include segmented-spinner($color: green, $segments: 16);
}
You also need to create the appropriate HTML markup for the spinner. As the above spinner is specified to have 16 segments, the markup should look like the following:
<div id="my-spinner">
<!-- 16 span elements in the containing div: -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Note that the spinners are styled to be centred within the containing element
(div#my-spinner
in this case).
Available Spinners
Boxes Spinner
Import
@import "scss-mixins-spinners/scss/boxes-spinner.scss";
Parameters
.some-spinner {
@include boxes-spinner(
$time: 1.5s,
$animation-name: "boxes-spinner-animation"
);
}
$time
Optional. The overall time for a single animation sequence, in seconds or milliseconds. Defaults to1.5s
.$animation-name
Optional. The name of the keyframes animation for this spinner instance. If you create multiple types of spinner, you will need to give them different animation names. Defaults to'boxes-spinner-animation'
.
Control the color and size of the spinner by setting the color
, width
and height
of the containing element.
Required HTML Markup
Nine span elements contained in a div:
<div class="some-spinner">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Segmented Spinner
Import
@import "scss-mixins-spinners/scss/segmented-spinner.scss";
Parameters
.some-spinner {
@include segmented-spinner(
$color: red,
$diameter: 50px,
$segments: 16,
$segmentWidth: 4px,
$segmentHeight: 12px,
$rounded: true,
$time: 0.8s,
$animation-name: "segmented-spinner-animation",
$min-opacity: 0.1,
$max-opacity: 1
);
}
$color
Required. The color of the boxes.$diameter
Optional. The overall diameter of the spinner in pixels. Defaults to50px
.$segments
Optional. The number of segments in the spinner. Defaults to16
.$segmentWidth
Optional. The width of each segment in pixels. Defaults to4px
.$segmentHeight
Optional. The height of each segment in pixels. Defaults to12px
.$rounded
Optional. Whether the segments have rounded corners or not. Defaults totrue
.$time
Optional. The overall time for a single animation sequence, in seconds or milliseconds. Defaults to.8s
.$animation-name
Optional. The name of the keyframes animation for this spinner instance. If you create multiple types of spinner, you will need to give them different animation names. Defaults to'segmented-spinner-animation'
.$min-opacity
Optional. The minimum opacity level for each segment during animation. Defaults to0.1
.$max-opacity
Optional. The maximum opacity level for each segment during animation. Defaults to1
.
Required HTML Markup
A div containing a span element for each segment. Thus a spinner with 16 segments requires 16 span elements:
<div class="some-spinner">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Examples
See here for examples of the available spinners.
Issues
CSS Modules
If you use these spinners with CSS Modules, you will currently need to
duplicate the animation-name
in your SCSS:
#my-spinner {
@include boxes-spinner(
$color: $dark-highlight-color,
$animation-name: "boxes-spinner-animation"
);
& span {
animation-name: boxes-spinner-animation;
}
}
This deals with an issue where local:
gets prefixed to the animation name
in the mixin functions.
Credits
The boxes spinner is one of the spinners in spinkit.
License
This package is licensed under the MIT License.