<!-- based on: https://codepen.io/Akiletour/pen/emGOgd -->
<h1>CSS animation loading indicator</h1>
<div class="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<!-- info -->
<div class="info">
  <label for="showInfo"> 
    show info
  </label>
  <input type="checkbox" id="showInfo">
  
  <div class="info-text">
    <p>
      This is a simple CSS animation showing moving <em>balls</em>.
    </p>
    <p>
      The animation controlls the <em>left</em> property to move the items on the X axis. This means that it's not that optimized. But at least runs with no JS
    </p>
  </div>
</div>
@import "compass/css3";

//Based on: https://codepen.io/Akiletour/pen/emGOgd
// Variables
$loader-size: 100px;
$loader-dot-size: ($loader-size / 5); //20
$loader-height: $loader-dot-size; //20
$loader-dot-color: #2196F3;

.loader{
  //border: 1px solid blue;
  width: $loader-size;
  height: $loader-height;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  > div {
    content: " ";
    width: $loader-dot-size;
    height: $loader-dot-size;
    background: $loader-dot-color;
    border-radius: 100%;
    position: absolute;
    animation: shift 2s linear infinite;
    &:nth-of-type(1) { animation-delay: -.4s; }
    &:nth-of-type(2) { animation-delay: -.8s; }
    &:nth-of-type(3) { animation-delay: -1.2s; }
    &:nth-of-type(4) { animation-delay: -1.6s; }
  }
}

@keyframes shift {
  0%{
    left: -3*$loader-dot-size;
    opacity: 0;
    background-color: yellow;
  }
  10% { 
    left: 0; 
    opacity: 1;
  }
  90% { 
    left: $loader-size; 
    opacity: 1;
  }
  100%{
    left: ($loader-size + 3*$loader-dot-size);
    background-color: red;
    opacity: 0;
  }
}

//// info
.info{
  position: absolute;
  bottom: 0;
  color: crimson;
  .info-text{
    display: none;
  }
  input:checked + .info-text{
    display: block;
  }
}



View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/marian-cojoc-ro/pen/eNNeBz