Javascript: Promise() .then doesnt work
<p>I am trying to make a loader animation style for my website. The loading animation is 16 bars which increase and decrease in order. For example, the first bar will increase and then decrease back to its original size. Then the next bar will repeat this process until all bars have done it, then stop the process and reveal the page. In this case, because JavaScript is asynchronous on calling functions, I used a promise to get around it. The use of promise is to animate the bar after the previous has completed animating. Currently, my code animates only the first bar and stops there. It doesn't continue to animate the rest of them. Below are all of my codes:</p>

<p><strong>IMPORTANT!</strong>
The issue it on javascript. Don't spend time on HTML or CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var index = -1;

function loading(){
 var loader = document.getElementById("loader");
 display = window.getComputedStyle(loader).display;
 if (display == "block"){
  var child = document.getElementById("loader-ul").getElementsByTagName("div");
  index = index + 1;
  alert("dd");
  animate(child);
 }
}

function animate(element){
 var el = element[index];
 var MaxHeight = false;
 var finished = false;
 function anim(){
  return new Promise(function(resolve, reject){
   if (finished == false){
    if (MaxHeight == false){
     var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
     var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
     height = height + 1;
     Bot = Bot + 0.5;
     el.style.bottom = Bot + "px";
     el.style.height = height + "px";
     if (height &lt;= 100){
      window.requestAnimationFrame(anim);
     }
     else{
      MaxHeight = true;
     }
    }
    if (MaxHeight == true){
     var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
     var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
     height = height - 1;
     Bot = Bot - 0.5;
     el.style.bottom = Bot + "px";
     el.style.height = height + "px";
     if (height &gt;= 50){
      window.requestAnimationFrame(anim);
     }
     else{
      MaxHeight = true;
      finished = true;
      el.style.bottom = 0 + "px";
      el.style.height = 50 + "px";
     }
    }
   }
   else{
    resolve();
   }
  });
 }
 anim().then(loading);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
 margin: 0px;
 padding: 0px;
 margin: auto;
}

#loader{
 display: block;
 position: fixed;
 height: 100%;
 width: 100%;
 background-color: white;
 z-index: 9999;
}

#loader .center{
 position: relative;
 height: 50px;
 width: 200px;
 background-color: red;
 top: 50%;
 transform: translateY(-50%);
 margin: auto;
}

#loader .center div{
 width: 2px;
 height: 50px;
 background-color: blue;
 float: left;
 padding: 0px;
 margin-right: 5px;
 margin-bottom: 25px;
 position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="loading()"&gt;
    &lt;div id="loader"&gt;
   &lt;div class="center" id="loader-ul"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>I also have a link to jsfiddle:</p>

<p><a href="https://jsfiddle.net/6227jjen/" rel="nofollow">https://jsfiddle.net/6227jjen/</a></p>

<p>Thank you all!</p>

<p>Note:
I have added some alerts for debugging purposes. </p>