12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

Preview:

Description:

SpinThatShit is a set of 12+ pure CSS single element loading spinners which can be used to indicate the content loading status in an elegant way. Fully customizable via SCSS.

How to use it:

Install the SpinThatShit in your web project.

npm install spinthatshit
bower install SpinThatShit

Create a DIV element where you want to place the loading spinner.

<div class="loader01"></div>
<div class="loader02"></div>
...
<div class="loader12"></div>

Customize the loading spinners in the _variables.scss.

$loader-color:                #0052ec;
$loader-size:                 56px;
$loader-height:               20px;
$loader-border-size:          8px;
$loader-gap:                  12px;
$loader-animation-duration:   1s;

Changelog:

09/13/2018

• fixed with unique id function for keyframes