Bootstrap progress bar timer

Question

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 1

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.

Answer 2

shershenUse JavaScript such as

document.getElementById("theBar").style.width = "80%";
document.getElementById("theBar").innerHTML = "80%";

And your bar will increase to 80%.

You can build a function using this approach to increase by 1% every second.

Updated solution

<script>
var i = 100;

var counterBack = setInterval(function(){
i--;
if(i>0){
    document.getElementById("theBar").style.width = i+1+"%";
    document.getElementById("theBar").innerHTML = i+1+"%";
} else {
   clearTimeout(counterBack);
}

}, 1000);
</script>

The code for loop was borrowed from shershen's answer.