title: How to make setInterval of a progress bar work when a tab is inactive
body: <p>I can see there are a couple of similar questions asked here but unfortunately I couldn't find the answer I expect.
  I am quite new to Programming and trying my hands on Javascript Progress Bar. I have a counter to countdown whenever the progress bar runs out of width but i got the problem, when the tab in focus is inactive, the progress bar pauses thereby keeping counter not to countdown.
  I got the idea of using web workers <a href="http://www.tutorialspoint.com/html5/html5_web_workers.htm" rel="nofollow">http://www.tutorialspoint.com/html5/html5_web_workers.htm</a> but I couldn't get that to work. I would appreciate any form of help I get here.
  Below is my Code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script 
             src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
             jquery.min.js"&gt;
         &lt;/script&gt;
      &lt;style&gt;
          #progressContainer {
              position: relative;
              width: 97%;
              height: 25px;
              background-color: #ddd;
              margin-bottom: 15px;
          }
          #progressBar {
              position: absolute;
              width: 0%;
              height: 100%;
              background-color: #A9A9A9;
          }
          #container{
              width: 200px;
              height: 200px;
              border: 1px solid black;
              padding: 10px
          }
      &lt;/style&gt;
  
      &lt;script&gt;
          $(document).ready(function(){
              $("#countDownBtn").click(function(){
  
                  var cdNumber = $("#countDownId").val();
                  var id = setInterval(frame, 100);
                  var elem = document.getElementById("progressBar");
                  var progressBarWidth = 101;
  
                  function frame() {                 
  
                      if (progressBarWidth === 0) {
                          clearInterval(id);
                          cdNumber--;                     
                          $("#countDownId").val(cdNumber);
                          console.log(cdNumber);
  
                          if (cdNumber === 0) {
                              clearInterval(id);          
                          }
                          else {
                              elem.style.width = '100%';
                              progressBarWidth = 100;
                              //alert("Hi");
                          }   
                      } 
                      else {
                          progressBarWidth--;
                          elem.style.width = progressBarWidth + '%';
                      }         
                  }                    
              });
          });
      &lt;/script&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div&gt;
              &lt;input type="text" id="countDownId" value=""&gt;
              &lt;button id="countDownBtn" class="btn"&gt;Click&lt;/button&gt;
          &lt;/div&gt;&lt;br&gt;
          &lt;div id="progressContainer"&gt;
          &lt;div id="progressBar"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p></p>