Fábio Santos Fábio Santos - 1 year ago 166
AngularJS Question

Bootstrap progress bar timer

First of, hello, I am using Angular.js, Bootstrap, HTML, and JavaScript (obv these 2).

So, I have the following bootstrap progress bar in my APP:

<div class="progress">
<div id="theBar" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
60%
</div>
</div>


Now, I'd like it to decrease from 100% to 0% ( each percentage being 1 second), the point would be to make a timer out of it, in which after it reaches zero, the user can no longer perform a specified action. I really have no clue how to do is, or if it is even possible using bootstraps progress bar, Thank you in advance and best regards.

Answer Source

Here is an example:

// Code goes here
var i = 100;

var counterBack = setInterval(function () {
  i--;
  if (i > 0) {
    $('.progress-bar').css('width', i + '%');
  } else {
    clearInterval(counterBack);
  }

}, 1000);

// Code goes here
var i = 100;

var counterBack = setInterval(function(){
  i--;
  if (i > 0){
    $('.progress-bar').css('width', i+'%');
  } else {
    clearInterval(counterBack);
  }
  
}, 1000);
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
<h2>Hello window.setInterval!</h2>
    
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span class="sr-only"></span>
  </div>
</div>

No AngularJS involved in this demo.