0

How could I make a live progress bar. This is what I am using as the progress bar, the bootstrap progress bar.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="progress">
      <div class="progress-bar" role="progressbar"
      aria-valuemin="0" aria-valuemax="100">
        Time Passed
      </div>
      <div class="center">Time Left</div>
    </div>

How can I make it so that it updates live, by adding 1% every second. I need to have it so the width of the class progressbar changes to a certain amounts of pixel. 100px=100% filled progress bar.

Let me know I am not clear enough.

Pabi
  • 946
  • 3
  • 16
  • 47

1 Answers1

1

This should do the trick, tried it in a jsfiddle and it was working. You might want to mess around with the text to get it outputting exactly what you want and of course could alter the speed by changing the timeout (the 1000 is milliseconds between calls)

I should add, it's good practice to reference the DOM using IDs rather than classes as I have done (just for quickness). As that would allow you to have multiple progress bars on a single page without them accidentally interacting with each other.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar" role="progressbar"
  aria-valuemin="0" aria-valuemax="100">
  </div>
  <div class="center" id="timeleft"></div>
</div>

SCRIPT

$(function() {
    i = 0;
    var myInterval = setInterval(function() {
        $(".progress-bar").attr("aria-valuenow",i);
        $(".progress-bar").css("width",i);
        $("#timeleft").html("Time Left: " + (100-i) + "s");
        if (i == 100) {
            $("#timeleft").html("Complete!");
            clearInterval(myInterval);
        }
        i++;
    }     
    ,1000);
});
Darren H
  • 910
  • 8
  • 24
  • A problem is that it goes to negatives. – Pabi Aug 22 '15 at 13:50
  • 1
    If ($i == 100) { http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript } – Darren H Aug 23 '15 at 07:07
  • I do not complete understand how this would work? Would you mind updating the code, adding this in. Thank you very much. I would greatly appreciate it. – Pabi Aug 23 '15 at 21:04
  • I've updated the answer, I've not tested the new solution but it should put you on the right track – Darren H Aug 24 '15 at 07:12
  • If you find anything wrong with it that is easily fixable, let me know what changes to make and I'll update the answer to save other people needing to read the comments to get a working solution – Darren H Aug 24 '15 at 07:13
  • Also I made a mistake. 100px width does not fill the bar to 100% it should be $(".progress-bar").width(i + '%'); instead of $(".progress-bar").css("width",i); – Pabi Aug 24 '15 at 10:44