CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Pabi
Pabi

Reputation: 994

jQuery Make a Live Progress Bar

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.

Upvotes: 0

Views: 2094

Answers (1)

Darren H
Darren H

Reputation: 902

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);
});

Upvotes: 1

Related Questions