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.

Qantas 94 Heavy · Accepted Answer · 2016-08-20 09:05:53Z

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.

K.I · Accepted Answer · 2015-05-07 15:31:31Z

1

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.

edited May 7, 2015 at 15:31

answered May 7, 2015 at 14:59

K.I

5861 gold badge7 silver badges20 bronze badges

6 Comments

K.I Over a year ago

I probably misread the message slightly, but yes your problem can be solved using this approach.

Fábio Santos Over a year ago

I'd have to type that every time, 100 times. And still would have no idea how to change it every second, BUT, it's k, we all make mistakes ;)

K.I Over a year ago

Well I did not say this is a full solution :D But if you like stuff done for you by others you can use same approach as the other guy suggested, so with my code it will look like this. See updated answer.

Fábio Santos Over a year ago

Well, I was trying to combine both solutions, but was having problems, because obviously I can't increment the width on getElementByID since it's a string. And yes, I got my code done by another person, but now I got this piece of info with me forever, and whenever I need it, I have it with me, and know how to proceed, either to implement it in its raw state or make changes as I need.

Fábio Santos Over a year ago

See, this was the idea that I had in mind, pretty much THIS, but didn't knew how to loop it. Anyhow, I just found that the first answer you gave me was wayyy too vast, that's why I complained in the first place.

|

Santiago Sotelo Docío · Accepted Answer · 2018-05-04 16:47:46Z

This solution needs ui-bootstrap, and the timer works with seconds:

Html:

<uib-progressbar class="progress-striped active" animate="true" value="timer" max="max" type="danger"></uib-progressbar>

Angularjs:

var app = angular.module('demoApp', ['ui.bootstrap']).controller('demoCtrl', function ($scope, $interval) {
$scope.timer = 15;
$scope.max = 15;

var countDown = $interval(function () {
    $scope.timer--;
    if ($scope.timer <= 0) {
        $interval.cancel(countDown);
        //TO DO
    }        
}, 1000);});

Collectives™ on Stack Overflow

Bootstrap progress bar timer

3 Answers 3

Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Related