12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

Category: CSS & CSS3 , Loading , Recommended | September 13, 2018
Views Total:11,822 views
Official Page:Go to website
Last Update:September 13, 2018


12+ Pure CSS/SCSS Loading Indicators – SpinThatShit


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;



  • fixed with unique id function for keyframes

You Might Be Interested In:

Leave a Reply