<div>
<div class="bl basic-loader">
  <!-- Loader -->
  <div class="loader" data-color="#87E7FF"></div>
</div>

<div class="bl cool-loader">
  <!-- Loader -->
<div class="loader" data-color="#FF6032"></div>
 </div>

<div class="bl strong-loader">
  <!-- Loader -->
<div class="loader" data-color="#64FF28"></div>
 </div>
  
<!--  Demo tag  -->
 <div>
  <p class="tag">A pure javascript loader</p> 
  </div>
</div>

/* Loader style */
.loader span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background:#0d0d0d;
  margin:0 1px;
  transition: all 1s ease;
}
/* End of loading style */



/* Codepen demo style */
.bl{
  float: left;
  margin:0 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
   width:80px;
  height:30px;

}
.basic-loader{
  background:#65ADBF;
  box-shadow: 0px 2px 5px 2px rgba(163, 210, 222, 0.65);
}

.cool-loader{
  background:#BF4726;
   box-shadow: 0px 2px 5px 2px rgba(166, 67, 39, 0.34);
}


.strong-loader{
  background:#4CBF1F;
   box-shadow: 0px 2px 5px 2px rgba(38, 76, 23, 0.25);
}


body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.tag{
  text-align: center;
  color:#cccccc;
      margin-top: 40px;
  display:block;
}

/* JS pure loader */
/* Author: Saifudeen */

(function () {
    /*
    *   Global vars
    *   Dom elements
    */
    let circleElem,
        loaderDivElem = document.querySelectorAll('.loader'),
        anim,
        k = 0,
        l = 2;


    //Generating divs. - (1)
    loaderDivElem.forEach(function(element, count){
        for (i = 0; i < 3; i++) {
            circleElem = document.createElement('span');
            circleElem.id = "load-span-" + i;
            //Styles
            circleElem.style.backgroundColor = element.dataset.color;
            //Appending spans into loader div
            element.appendChild(circleElem);
        }
    })
    
    /*
    *   Animation calls,
    *   Calling three times 
    */

    // Logic - (3)
    function callAnimFn() {
        /*
        *   variable k stands for forward condition
        *   variable l stands for backward condition
        */
        if (k == 3) {
            if (l < 1) {
                animate(l, "backwards");
                l = 2;
                k = 0;
            }
            else {
                animate(l, "backwards");
                l--;
            }
        }
        else {
            animate(k, "forwards");
            k++;
        }
    }

    //Animation happens inside this function. - (4)
    function animate(spanKey, status) {
        if (status == "forwards") {
            loaderDivElem.forEach(function(elementInner){
                elementInner.querySelector('#load-span-' + spanKey).style.width = 20 + "px";
            });
        }

        if (status == "backwards") {
            loaderDivElem.forEach(function(elementInner){
                elementInner.querySelector('#load-span-' + spanKey).style.width = "10px";
            });
        }
    }


    // Root call - (2)
    let callAnim = setInterval(callAnimFn, 500);


}());