title: Have a customized progress bar in HTML on click of a button
body: <p>I am a novice HTML coder and have a silly issue!
  I want to have a customized progress bar that shows the progress once SUBMIT is clicked. I tried using the  tag of HTML, but it did not do the job for me.
  How can I have an animation like this integrated with my code: <a href="http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource" rel="nofollow">http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource</a></p>
  
  <p>I am not able to figure out in what section what code has to be put.</p>
  
  <p>I have tried this,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  #myProgress {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: #ddd;
  }
  
  #myBar {
    position: absolute;
    width: 10%;
    height: 100%;
    background-color: #4CAF50;
  }
  
  #label {
    text-align: center;
    line-height: 30px;
    color: white;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;h1&gt;JavaScript Progress Bar&lt;/h1&gt;
  
  &lt;div id="myProgress"&gt;
    &lt;div id="myBar"&gt;
      &lt;div id="label"&gt;10%&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;button onclick="move()"&gt;Click Me&lt;/button&gt; 
  
  &lt;script&gt;
  function move() {
    var elem = document.getElementById("myBar");   
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width &gt;= 100) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
        document.getElementById("label").innerHTML = width * 1  + '%';
      }
    }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This doesn't work because I dont want the progress bar to be visible before I click submit.</p>