A Pen by Ana Tudor.

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 Ana Tudor 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

@import "compass/css3";
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); }
      }
    }
  }
}