Bootstrap progress bar progression

Question

I am using bootstrap to create my website and I am trying to use a progress bar. What I am trying to do is after I complete a function in PHP (I have 10 functions to do) I advance the progress of the bar by 10%. I believe his is done using java-script but I am unsure on how to do it with bootstrap and my current web searches have not turned up anything I could use. (there are examples of when the page loads progress to 100% but I don't know how these work)

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;"></div>
</div>

This above is my HTML definition of the bootstrap progress bar. I know changing the width changes the percentage of what is filled in but I don't know how to change it after I have completed a function (functions are all in one page ran one after another).

Could someone help? or point me in the right direction?

@JonathanRomer I understand the language fine, its my first time using bootstrap with progress bars so i needed some assistance. This is what the forums are for: GETTING HELP!! Thanks to the forums i now have a better understanding and I am learning this. Your post is neither helpful or constructive. There is no need to have a dig at me for trying to learn!!!!! Don't bother posting if you wont be helpful! — NoLiver92, Aug 30 '13 at 11:03
My mistake, after reading your post. I can see all the countless hours of effort you put into this project too come up with a solution yourself. Sorry that i didnt see that from the beginning, sorry for the inconvenience. — Jonathan Römer, Aug 30 '13 at 11:05

score 8 · Answer 1 · answered Mar 14 '16 at 12:52

You can change the width of your progress bar like this :

$('.progress-bar').css('width', percentageCompleted + '%');

Just keep repeating this whenever the values of percentageCompleted changes, until that value is 100.

A demo

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Loading completed!</div>

(see also this Fiddle)

score 5 · Answer 2 · answered Jul 15 '16 at 07:36

5

If you need to make an animation of progress barr in one step, you can make two lines of code:

$progressBar.animate({width: "100%"}, 100);
$progress.delay(1000).fadeOut(500);

see the demo https://jsfiddle.net/qLgv2Lfm/29/

answered Jul 15 '16 at 07:36

user2347746

51
1
2

Aelios · Accepted Answer · 2013-10-15T14:50:08.363

4

Prefer using JQuery

$(".bar").css("width", "50%");

or in Javascript

var bars = document.getElementsByClassName("bar");
bars[0].style.width = "50%";

edited Oct 15 '13 at 14:50

answered Aug 30 '13 at 10:47

Aelios

11,849
2
36
54

ok this works thanks :) the reason it wasnt working was i put the jquery script decleration at the bottom like bootstrap said. moved it to head and it works, thanks – NoLiver92 Aug 30 '13 at 10:56
3

You should almost certainly keep it at the bottom and adapt your code to suit. – BenLanc Aug 30 '13 at 11:05
You can update the aria values too, using: **$('.bar').css('width', '50%').attr('aria-valuenow', 50);** from [#21182058](http://stackoverflow.com/questions/21182058/dynamically-change-bootstrap-progress-bar-value-when-checkboxes-checked) – Anthony Jan 11 '16 at 14:39

Bootstrap progress bar progression

3 Answers3

A demo

Linked