CSS Loaders, Single Element

by Louis Walch

HTML

<div class="label">#1</div> 
<div class="loader1"></div>

<div class="label">#2</div> 
<div class="loader2"></div>

<div class="label">#9</div> 
<div class="loader9"></div>

<div class="label">#3</div> 
<div class="loader3"></div>

<div class="label">#6</div> 
<div class="loader6"></div>

<div class="label">#7</div> 
<div class="loader7"></div>

<div class="label">#8</div> 
<div class="loader8"></div>

<div class="label">#4</div> 
<div class="loader4"></div>

<div class="label">#5</div> 
<div class="loader5-wraper">
    <div class="loader5"></div>
</div>

SCSS

BODY {
  text-align: center;
}

.label {
    margin-top: 70px;
    margin-bottom: 10px;
    font-size: 12px;
    font-family: Arial;
    opacity: 0.4;
    &:hover {
        opacity: 1;
    }
}

$loader-size: 6px;
$loader-color: #000;

@mixin loader-dots($a: 0, $b: 0, $c: 0) {
    $margin: $loader-size;
    $x: ($loader-size + $margin);
    $y: $loader-size;
    box-shadow: 
        $x*-1 $y 0 rgba($loader-color,$a),
        0 $y rgba($loader-color,$b),
        $x $y rgba($loader-color,$c);
}

@keyframes loader-animation {
  0% {
    @include loader-dots;
  }
  16% {
    @include loader-dots($a: 1);
  }
  32% {
    @include loader-dots($a: 1, $b: 1);
  }
  48% {
    @include loader-dots($a: 1, $b: 1, $c: 1);
  }
  66% {
    @include loader-dots($b: 1, $c: 1);
  }
  82% {
    @include loader-dots($c :1);
  }
  100% {
    @include loader-dots;
  }
}

.loader1 {  
    &:after {
        content: ' ';
        display: block;
        margin: 0 auto;
        background: transparent;
        width: $loader-size;
        height: $loader-size;
        border-radius: 100%;
        animation: loader-animation 1s infinite ease-in-out;
        @include loader-dots;
    }
}

/* -------------------------------- */

.loader2,
.loader2:before,
.loader2:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader2 {
  margin: 0 auto;
  color: #000;
  font-size: 3px;
  letter-spacing: 2px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}

.loader2:before,
.loader2:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader2:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.loader2:after {
  left: 3.5em;
}

@keyframes bblFadInOut {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em
  }

  40% {
    box-shadow: 0 2.5em 0 0
  }
}


/* -------------------------------- */


.loader3 {
  width: 48px;
  height: 48px;
  display:...