<div id="loader">
  <div class="box">
    <hr>
    <h1>Some loaders with zoom and gradient color animations</h1>
    <hr>
    <div class="circle">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="blobb-gradient circle fast"></div>
        <div class="blobb-gradient circle fast"></div>
        <div class="blobb-gradient circle fast"></div>
        <div class="blobb-gradient circle fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="blobb-gradient circle slow"></div>
        <div class="blobb-gradient circle slow"></div>
        <div class="blobb-gradient circle slow"></div>
        <div class="blobb-gradient circle slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="blobb-gradient circle slowest"></div>
        <div class="blobb-gradient circle slowest"></div>
        <div class="blobb-gradient circle slowest"></div>
        <div class="blobb-gradient circle slowest"></div>
      </div>
    </div>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="blobb-gradient square fast"></div>
        <div class="blobb-gradient square fast"></div>
        <div class="blobb-gradient square fast"></div>
        <div class="blobb-gradient square fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="blobb-gradient square slow"></div>
        <div class="blobb-gradient square slow"></div>
        <div class="blobb-gradient square slow"></div>
        <div class="blobb-gradient square slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="blobb-gradient square slowest"></div>
        <div class="blobb-gradient square slowest"></div>
        <div class="blobb-gradient square slowest"></div>
        <div class="blobb-gradient square slowest"></div>
      </div>
    </div>
  </div>
  <div class="box">
    <hr>
    <h1>Some Loaders with zoom and color animations</h1>
    <hr>
    <div class="circle">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="blobb circle fast"></div>
        <div class="blobb circle fast"></div>
        <div class="blobb circle fast"></div>
        <div class="blobb circle fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="blobb circle slow"></div>
        <div class="blobb circle slow"></div>
        <div class="blobb circle slow"></div>
        <div class="blobb circle slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="blobb circle slowest"></div>
        <div class="blobb circle slowest"></div>
        <div class="blobb circle slowest"></div>
        <div class="blobb circle slowest"></div>
      </div>
    </div>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="blobb square fast"></div>
        <div class="blobb square fast"></div>
        <div class="blobb square fast"></div>
        <div class="blobb square fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="blobb square slow"></div>
        <div class="blobb square slow"></div>
        <div class="blobb square slow"></div>
        <div class="blobb square slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="blobb square slowest"></div>
        <div class="blobb square slowest"></div>
        <div class="blobb square slowest"></div>
        <div class="blobb square slowest"></div>
      </div>
    </div>
  </div>
  <div class="box">
    <hr>
    <h1>Some loaders without zoom and color fading</h1>
    <hr>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade square fast"></div>
        <div class="fade square fast"></div>
        <div class="fade square fast"></div>
        <div class="fade square fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade square slow"></div>
        <div class="fade square slow"></div>
        <div class="fade square slow"></div>
        <div class="fade square slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade square slowest"></div>
        <div class="fade square slowest"></div>
        <div class="fade square slowest"></div>
        <div class="fade square slowest"></div>
      </div>
    </div>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade square nm fast"></div>
        <div class="fade square nm fast"></div>
        <div class="fade square nm fast"></div>
        <div class="fade square nm fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade square nm slow"></div>
        <div class="fade square nm slow"></div>
        <div class="fade square nm slow"></div>
        <div class="fade square nm slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade square nm slowest"></div>
        <div class="fade square nm slowest"></div>
        <div class="fade square nm slowest"></div>
        <div class="fade square nm slowest"></div>
      </div>
    </div>
    <div class="circle">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade circle fast"></div>
        <div class="fade circle fast"></div>
        <div class="fade circle fast"></div>
        <div class="fade circle fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade circle slow"></div>
        <div class="fade circle slow"></div>
        <div class="fade circle slow"></div>
        <div class="fade circle slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade circle slowest"></div>
        <div class="fade circle slowest"></div>
        <div class="fade circle slowest"></div>
        <div class="fade circle slowest"></div>
      </div>
    </div>
  </div>
  <div class="box">
    <hr>
    <h1>Some loaders without zoom and gradient color fading</h1>
    <hr>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade-gradient square fast"></div>
        <div class="fade-gradient square fast"></div>
        <div class="fade-gradient square fast"></div>
        <div class="fade-gradient square fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade-gradient square slow"></div>
        <div class="fade-gradient square slow"></div>
        <div class="fade-gradient square slow"></div>
        <div class="fade-gradient square slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade-gradient square slowest"></div>
        <div class="fade-gradient square slowest"></div>
        <div class="fade-gradient square slowest"></div>
        <div class="fade-gradient square slowest"></div>
      </div>
    </div>
    <div class="square">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade-gradient square nm fast"></div>
        <div class="fade-gradient square nm fast"></div>
        <div class="fade-gradient square nm fast"></div>
        <div class="fade-gradient square nm fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade-gradient square nm slow"></div>
        <div class="fade-gradient square nm slow"></div>
        <div class="fade-gradient square nm slow"></div>
        <div class="fade-gradient square nm slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade-gradient square nm slowest"></div>
        <div class="fade-gradient square nm slowest"></div>
        <div class="fade-gradient square nm slowest"></div>
        <div class="fade-gradient square nm slowest"></div>
      </div>
    </div>
    <div class="circle">
      <div class="ribble">
        <h2>Fast</h2>
        <div class="fade-gradient circle fast"></div>
        <div class="fade-gradient circle fast"></div>
        <div class="fade-gradient circle fast"></div>
        <div class="fade-gradient circle fast"></div>
      </div>

      <div class="ribble">
        <h2>Slow</h2>
        <div class="fade-gradient circle slow"></div>
        <div class="fade-gradient circle slow"></div>
        <div class="fade-gradient circle slow"></div>
        <div class="fade-gradient circle slow"></div>
      </div>

      <div class="ribble">
        <h2>Slowest</h2>
        <div class="fade-gradient circle slowest"></div>
        <div class="fade-gradient circle slowest"></div>
        <div class="fade-gradient circle slowest"></div>
        <div class="fade-gradient circle slowest"></div>
      </div>
    </div>
  </div>
</div>
/* Loader Size */

$loader-width: 20px;
$loader-height: 20px;

/* Animation durations */

$fast-animation: 1.25s;
$slow-animation: 1.55s;
$slowest-animation: 2s;

/* Animation delay */

$animation-delay: 0.25s;

/* Animation Color and Zoom */

// First blobb
$blobb-first-color: rgb(45, 125, 154);
$blobb-second-color: rgb(0, 153, 188);
// Second blobb
$blobb-third-color: rgb(22, 160, 133);
$blobb-fourth-color: rgb(46, 204, 113);
// Fade without zoom
$fade-from-color: rgb(45, 125, 154);
$fade-to-color: rgb(0, 172, 211);
// Fade without zoom gradient
$fade-gradient-from-color: rgb(22, 160, 133);
$fade-gradient-to-color: rgb(46, 204, 113);

$zoom-size: 1.2;

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 100%;
  color: rgb(100, 100, 100);
  padding: 0;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 17px;
}

body {
  background: #eee;
}

footer {
  #wrapper {
    width: 768px;
    height: 50px;
    text-align: center;
    margin: auto;
    background: #fff;
  }
  a {
    line-height: 50px;
  }
}

.box {
  padding-top: 25px;
  padding: 25px;
  margin-bottom: 25px;
  max-width: 768px;
  margin: 25px auto;
  background: #fff;
}

#loader {
  .ribble {
    display: inline-block;
    min-width: 33.33333%;
    margin-right: -3px;
    min-height: 100px;
    
    &:not(:first-child) {
  
    }
    .blobb {
      width: $loader-width;
      display: inline-block;
      height: $loader-height;
      margin-right: 1.5px;
      background-color: $blobb-first-color;
      -webkit-transition: 1s all ease-in-out;
      transition: 1s all ease-in-out;
      &.circle {
        border-radius: 50%;
      }
      &.square {
        border-radius: 0%;
      }
      &.fast {
        -webkit-animation: blobb $fast-animation infinite;
        animation: blobb $fast-animation infinite;
      }
      &.slow {
        -webkit-animation: blobb $slow-animation infinite;
        animation: blobb $slow-animation infinite;
      }
      &.slowest {
        -webkit-animation: blobb $slowest-animation infinite;
        animation: blobb $slowest-animation infinite;
      }
      &:nth-child(2) {
        -webkit-animation-delay: $animation-delay;
        animation-delay: $animation-delay;
      }
      &:nth-child(3) {
        -webkit-animation-delay: $animation-delay*2;
        animation-delay: $animation-delay*2;
      }
      &:nth-child(4) {
        -webkit-animation-delay: $animation-delay*3;
        animation-delay: $animation-delay*3;
      }
      &:nth-child(5) {
        -webkit-animation-delay: $animation-delay*4;
        animation-delay: $animation-delay*4;
      }
    }
    .blobb-gradient {
      width: $loader-width;
      display: inline-block;
      height: $loader-height;
      margin-right: 1.5px;
      background-color: $blobb-third-color;
      -webkit-transition: 1s all ease-in-out;
      transition: 1s all ease-in-out;
      &.circle {
        border-radius: 50%;
      }
      &.square {
        border-radius: 0%;
      }
      &.fast {
        -webkit-animation: blobb-gradient $fast-animation infinite;
        animation: blobb-gradient $fast-animation infinite;
      }
      &.slow {
        -webkit-animation: blobb-gradient $slow-animation infinite;
        animation: blobb-gradient $slow-animation infinite;
      }
      &.slowest {
        -webkit-animation: blobb-gradient $slowest-animation infinite;
        animation: blobb-gradient $slowest-animation infinite;
      }
      &:nth-child(2) {
        -webkit-animation-delay: $animation-delay;
        animation-delay: $animation-delay;
      }
      &:nth-child(3) {
        -webkit-animation-delay: $animation-delay*2;
        animation-delay: $animation-delay*2;
      }
      &:nth-child(4) {
        -webkit-animation-delay: $animation-delay*3;
        animation-delay: $animation-delay*3;
      }
      &:nth-child(5) {
        -webkit-animation-delay: $animation-delay*4;
        animation-delay: $animation-delay*4;
      }
    }
    .fade {
      width: $loader-width;
      display: inline-block;
      height: $loader-height;
      margin-right: 1.5px;
      background-color: $fade-from-color;
      -webkit-transition: 1s all ease-in-out;
      transition: 1s all ease-in-out;
      &.nm {
        float: left;
        margin: 0;
      }
      &.circle {
        border-radius: 50%;
      }
      &.square {
        border-radius: 0%;
      }
      &.fast {
        -webkit-animation: fade $fast-animation infinite;
        animation: fade $fast-animation infinite;
      }
      &.slow {
        -webkit-animation: fade $slow-animation infinite;
        animation: fade $slow-animation infinite;
      }
      &.slowest {
        -webkit-animation: fade $slowest-animation infinite;
        animation: fade $slowest-animation infinite;
      }
      &:nth-child(2) {
        -webkit-animation-delay: $animation-delay;
        animation-delay: $animation-delay;
      }
      &:nth-child(3) {
        -webkit-animation-delay: $animation-delay*2;
        animation-delay: $animation-delay*2;
      }
      &:nth-child(4) {
        -webkit-animation-delay: $animation-delay*3;
        animation-delay: $animation-delay*3;
      }
      &:nth-child(5) {
        -webkit-animation-delay: $animation-delay*4;
        animation-delay: $animation-delay*4;
      }
    }
    .fade-gradient {
      width: $loader-width;
      display: inline-block;
      height: $loader-height;
      margin-right: 1.5px;
      background-color: $fade-gradient-from-color;
      -webkit-transition: 1s all ease-in-out;
      transition: 1s all ease-in-out;
      &.nm {
        float: left;
        margin: 0;
      }
      &.circle {
        border-radius: 50%;
      }
      &.square {
        border-radius: 0%;
      }
      &.fast {
        -webkit-animation: fade-gradient $fast-animation infinite;
        animation: fade-gradient $fast-animation infinite;
      }
      &.slow {
        -webkit-animation: fade-gradient $slow-animation infinite;
        animation: fade-gradient $slow-animation infinite;
      }
      &.slowest {
        -webkit-animation: fade-gradient $slowest-animation infinite;
        animation: fade-gradient $slowest-animation infinite;
      }
      &:nth-child(2) {
        -webkit-animation-delay: $animation-delay;
        animation-delay: $animation-delay;
      }
      &:nth-child(3) {
        -webkit-animation-delay: $animation-delay*2;
        animation-delay: $animation-delay*2;
      }
      &:nth-child(4) {
        -webkit-animation-delay: $animation-delay*3;
        animation-delay: $animation-delay*3;
      }
      &:nth-child(5) {
        -webkit-animation-delay: $animation-delay*4;
        animation-delay: $animation-delay*4;
      }
    }
  }
}

/* Animation */

@-webkit-keyframes blobb {
  0%,
  25% {
    background: $blobb-first-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    background-color: $blobb-second-color;
    -webkit-transform: scale($zoom-size);
    transform: scale($zoom-size);
  }
  100% {
    background-color: $blobb-first-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes blobb {
  0%,
  25% {
    background: $blobb-first-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    background-color: $blobb-second-color;
    -webkit-transform: scale($zoom-size);
    transform: scale($zoom-size);
  }
  100% {
    background-color: $blobb-first-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes blobb-gradient {
  0%,
  25% {
    background: $blobb-third-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    background-color: $blobb-fourth-color;
    -webkit-transform: scale($zoom-size);
    transform: scale($zoom-size);
  }
  100% {
    background-color: $blobb-third-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes blobb-gradient {
  0%,
  25% {
    background: $blobb-third-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    background-color: $blobb-fourth-color;
    -webkit-transform: scale($zoom-size);
    transform: scale($zoom-size);
  }
  100% {
    background-color: $blobb-third-color;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fade {
  0%,
  5% {
    background: $fade-from-color;
  }
  50% {
    background-color: $fade-to-color;
  }
  100% {
    background-color: $fade-from-color;
  }
}

@keyframes fade {
  0%,
  5% {
    background: $fade-from-color;
  }
  50% {
    background-color: $fade-to-color;
  }
  100% {
    background-color: $fade-from-color;
  }
}

@-webkit-keyframes fade-gradient {
  0%,
  5% {
    background: $fade-gradient-from-color;
  }
  50% {
    background-color: $fade-gradient-to-color;
  }
  100% {
    background-color: $fade-gradient-from-color;
  }
}

@keyframes fade-gradient {
  0%,
  5% {
    background: $fade-gradient-from-color;
  }
  50% {
    background-color: $fade-gradient-to-color;
  }
  100% {
    background-color: $fade-gradient-from-color;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.