Collection of animated loaders

collection-of-animated-loaders.markdown

Collection of animated loaders

Inspired by this article, except I've tried to create one element (no cheating with pseudos) versions. Not meant to reproduce the loaders in the article exactly and may have poorer browser support.

A Pen by gdg on CodePen.

License.

index.html

<div class='loader loader--audioWave'></div>
<div class='loader loader--snake'></div>
<div class='loader loader--spinningDisc'></div>
<div class='loader loader--glisteningWindow'></div>
<div class='loader loader--circularSquare'></div>

style.scss

body {
  min-height: 32em;
  background: gainsboro;
}

.loader {
  margin: 5em auto;
  
  &--audioWave {
    $bg-list: ();
    $size-list: ();
    $n-bars: 5;
    $bar-top-c: #9b59b6;
    $bar-bottom-c: $bar-top-c;
    $bar-w: .5em;
    $bar-h: 2em;
    $bar-space: .125em;
    
    @for $i from 0 to $n-bars {
      $bg-list: $bg-list, 
        linear-gradient($bar-top-c, $bar-bottom-c) 
          if($i > 0, $i*($bar-w + $bar-space), 0) 50%;
      $size-list: $size-list, $bar-w $bar-h/8;
    }
    
    width: $n-bars*$bar-w + ($n-bars - 1)*$bar-space;
    height: $bar-h;
    background: $bg-list;
    background-repeat: no-repeat;
    background-size: $size-list;
    animation: audioWave 1.5s linear infinite;
    
    @at-root {
      @keyframes audioWave {        
        @for $i from 0 to $n-bars {
          #{25% + $i*100%/8} {
            $bg-list: ();
            $size-list: ();
            $bar-full-exp-top-c: #3498db;
            $bar-full-exp-bottom-c: $bar-full-exp-top-c;
            
            @for $j from 0 to $n-bars {
              $bar-curr-top-c: $bar-top-c;
              $bar-curr-bottom-c: $bar-bottom-c;
              $bar-curr-h: $bar-h/8;
              
              @if $i == $j {
                $bar-curr-top-c: $bar-full-exp-top-c;
                $bar-curr-bottom-c: $bar-full-exp-bottom-c;
                $bar-curr-h: $bar-h;
              }
              
              $bg-list: $bg-list, 
                linear-gradient($bar-curr-top-c, $bar-curr-bottom-c) 
                  if($j > 0, $j*($bar-w + $bar-space), 0) 50%;
              $size-list: $size-list, 
                $bar-w $bar-curr-h;
            }
            
            background: $bg-list;
            background-repeat: no-repeat;
            background-size: $size-list;
          }
        }
      }
    }
  }
  
  &--snake {
    $n: 5;
    $d: 1.25em;
    $space: .125em;
    $sh-list: ();
    $base-angle: 360deg/$n;
    $sh-c: rgba(0,0,0,.52);
    
    @for $i from 0 to $n {
      $curr-angle: $i*$base-angle;
      $curr-c: mix(#3498db, #f1c40f, ($i + .5)/$n*100%);
      $x: ($i + 1)*($d + $space);
      $y: $d/4*sin($curr-angle);
      
      $sh-list: $sh-list, 
         $x $y $curr-c, $x (-$y) $d/2 (-$d/4) $sh-c;
    }
    
    width: $d; height: $d;
    border-radius: 50%;
    transform: translate(-($n + 1)*($d + $space)/2);
    box-shadow: $sh-list;
    animation: snake 2s linear infinite;
    
    @at-root {
      @keyframes snake {
        @for $j from 0 through $n {
          #{$j*100%/$n} {
            $sh-list: ();
            
            @for $i from 0 to $n {
              $curr-angle: ($i + $j)*$base-angle;
              $curr-c: mix(#3498db, #f1c40f, (($i + $j)%$n + .5)/$n*100%);
              $x: ($i + 1)*($d + $space);
              $y: $d/4*sin($curr-angle);

              $sh-list: $sh-list, 
                $x $y $curr-c, $x (-$y) $d/2 (-$d/4) $sh-c;
            }
            
            box-shadow: $sh-list;
          }
        }
      }
    }
  }
  
  &--spinningDisc {
    $d: 2em;
    $bw: .5em;
    $ccp: #3498db;
    $ccs: #2ecc71;
    $bcp: #9b59b6;
    $bcs: $ccp;
    
    border: solid $bw $bcp;
    border-right-color: transparent;
    border-left-color: transparent;
    padding: $bw;
    width: $d; height: $d;
    border-radius: 50%;
    background: $ccp;
    background-clip: content-box;
    animation: spinDisc 1.5s linear infinite;
    
    @at-root {
      @keyframes spinDisc {
        50% {
          border-top-color: $bcs;
          border-bottom-color: $bcs;
          background-color: $ccs;
        }
        100% { transform: rotate(1turn); }
      }
    }
  }
  
  &--glisteningWindow {
    $d: .25em;
    $k: 4;
    $sh-list: ();
    $c-list: #2ecc71 #9b59b6 #3498db #f1c40f;
    $n: length($c-list);
    $base-angle:360deg/$n;
    
    @for $i from 0 to $n {
      $curr-angle: ($i + .5)*$base-angle;
      
      $sh-list: $sh-list, 
        $k*$d*cos($curr-angle) $k*$d*sin($curr-angle) 
        0 $d*sin($i*$base-angle/2) 
        nth($c-list, $i + 1);
    }
    
    width: $d; height: $d;
    box-shadow: $sh-list;
    animation: gw 1s ease-in-out infinite, rot 2.8s linear infinite;
    
    @at-root {
      @keyframes rot { to { transform: rotate(360deg); } }
      
      @keyframes gw {
        @for $j from 0 through $n {
          #{$j*100%/$n} {
            $sh-list: ();

            @for $i from 0 to $n {
              $curr-angle: ($i + .5)*$base-angle;

              $sh-list: $sh-list, 
                $k*$d*cos($curr-angle) $k*$d*sin($curr-angle) 
                0 $d/2 + abs(3*$d/2*sin(($j + $i)*$base-angle/2)) 
                nth($c-list, $i + 1);
            }
            
            box-shadow: $sh-list;
          }
        }
      }
    }
  }
  
  &--circularSquare {
    $d: 1.25em;
    $ic: #9b59b6;
    $tlc: #2ecc71;
    $trc: #e74c3c;
    $blc: #3498db;
    $brc: #f1c40f;
    
    width: 0; height: 0;
    box-shadow: -$d/2 (-$d/2) 0 $d/2 $ic, $d/2 (-$d/2) 0 $d/2 $ic, 
                -$d/2   $d/2  0 $d/2 $ic, $d/2   $d/2  0 $d/2 $ic;
    animation: circSquare 1.5s ease-in-out infinite;
    
    @at-root {
      @keyframes circSquare {

        50% {
          width: $d; height: $d;
          border-radius: 50%;
          transform: rotate(.5turn);
          box-shadow: -2*$d 0 0 $tlc, 2*$d 0 0 $trc, 
                      -2*$d 0 0 $blc, 2*$d 0 0 $brc;
        }
        80%, 100% { transform: rotate(1turn); }
      }
    }
  }
}