12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

Category: CSS & CSS3 , Loading , Recommended | September 13, 2018
Author: MatejKustec
Views Total: 4,726
Official Page: Go to website
Last Update: September 13, 2018
License: MIT

Preview:

12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

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

You Might Be Interested In:


Leave a Reply