Javascript progress bar in succession In the below code snippet, on click of a button, progress bars are added one by one. The bar shows up for 3 seconds. If you continuously click on the button, it will keep adding progress bars. The next bar will start after the previous bar finishes animating.

Is there anyway to make the code better?



;(function(window, document, undefined) {
    
    'use strict';

    var container = document.getElementsByClassName('container')[0];
    var button = document.getElementsByTagName('button')[0];
    var progressBar = document.getElementsByClassName("bar-container")[0];

    var promise = Promise.resolve();

    button.addEventListener('click', function() {
        var newProgressBar = progressBar.cloneNode(true);
        container.appendChild(newProgressBar);
        
        promise = promise.then(function() {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                                      newProgressBar.classList.add('active');
                    setTimeout(function() {
                        resolve();
                    }, 3000);
                }, 0);
            });
        })
    });
    
    
})(window, document);
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        .bar-container{
            width: 100%;
            background: #ccc;
            border: 1px solid #eee;
            margin-bottom: 10px;
        }
        .loader{
            height: 20px;
            background: #434334;
            width: 0px;
            transition: width 3s ease;
        }
        .active .loader{
            width: 100%;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="container"&gt;&lt;/div&gt;

    &lt;div style="display: none"&gt;
        &lt;div class="bar-container"&gt;
            &lt;div class="loader"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button id="button"&gt;click me&lt;/button&gt;
    
    
    &lt;script src="script.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;




emphasized text
Your code already looks pretty clean. Good work! There are only a few things I would recommend changing. 


Don't define timings in CSS that should be defined in JavaScript. In this specific case using a transition made it possible to simplify the code significantly, however in a more involved example it would become problematic. What happens if one progress bar takes 2 seconds to complete, and another takes 5?
Instead of using getElementsByClassName('cls')[0], you can use querySelector('.cls') for more readable code. Though this can be slower, it really isn't an issue unless it is being run thousands of times per second. 
There is a built in &lt;progress&gt; element that you may want to use.
It is a good idea to wrap template elements in a &lt;template&gt; element.


Here's a simple demo that defines the timing in the JavaScript. 



function Loader(element, time) {
  return new Promise(resolve =&gt; {
    let intervalId;
    function tick() {
      element.value = parseInt(element.value, 10) + 1
      if (element.value == element.max) {
        clearInterval(intervalId)
        resolve()
      }
    }
    setInterval(tick, time / element.max)
  })
}

let promise = Promise.resolve()
let container = document.querySelector('.container')
let template = document.querySelector('template')

function addProgress() {
  let progress = document.importNode(template.content, true)
  container.appendChild(progress)
  // progress is a document fragment, not the template element
  return container.querySelector('progress:last-child')
}

document.querySelector('button').addEventListener('click', () =&gt; {
  let bar = addProgress()
  promise = promise.then(() =&gt; Loader(bar, 3000))
})
progress {
  display: block;
  width: 100%;
}
&lt;template&gt;
  &lt;progress max="100" value="0"&gt;&lt;/progress&gt;
&lt;/template&gt;
&lt;div class="container"&gt;&lt;/div&gt;
&lt;button&gt;Click me!&lt;/button&gt;