title: jquery progress bar to count seconds and stop on click
body: <p>I have checked quite a few of the progress bars on the internet but none seem to handle the following case:</p>
  
  <ol>
  <li><p>show a progress bar which updates automatically in the background as a function of time. e.g. to be simple the jqueryUI progress bar which would update automatically in the background every second until 5 seconds (at 5s it is at 100% and stops).</p></li>
  <li><p>Possibility of clicking somewhere to stop it.</p></li>
  </ol>
  
  <p>The use case for this is in simple games for children where progress is shown but when the task is completed there is a simple way to stop the progress bar.</p>
  
  <p>Is there an easy way to implement this in jquery/javascript?</p>
  
  <p><strong>Edit</strong>, from DavidKonrad's accepted answer, I have created a small typescript class, with the additional support for _gProgressAlive to query if progress is running, and a callback to take action when progress is done.  Here is the result,  hope it helps others!</p>
  
  <pre><code>var  _gProgressStatus=0;
  var _gProgressMax=3;
  var _gProgressIncrement=1000;
  var _gProgress;
  var _gProgressAlive=false;
  class ProgressBar{
  
  static stop() {
    clearInterval(_gProgress);
    _gProgressAlive=false;
  
  }
  
  static start(endCallback){
      _gProgressAlive=true;
       _gProgressStatus=0;
    _gProgress = setInterval(function() {
    _gProgressStatus++; 
    $("#progressbar").progressbar({
     value :_gProgressStatus,max:_gProgressMax
    });
    if (_gProgressStatus &gt;=  _gProgressMax){ ProgressBar.stop();endCallback();}
  }, _gProgressIncrement);
  }
  
  }
  </code></pre>
  
  <p>and here is the main html test markup</p>
  
  <pre><code>&lt;script&gt;
  ProgressBar.start(function(){   
      console.log("completed, time's up");
      console.log(_gProgressAlive); // false progress is complete, this is the callback
  });
      console.log(_gProgressAlive); // should output true, progress bar has started
    &lt;/script&gt;
  &lt;div id="progressbar"&gt;&lt;/div&gt;
  </code></pre>