jQuery and Twitter Bootstrap progress bar [closed]

Question

I have this code:

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

What should I do, so when I click a button somewhere on the website, the width will go from 0 to 100, in a specific time, and give the effect of a loading progress bar?

Thanks.

Answer 1

jQuery animate, as mentioned already, will do that. Change the duration to fit the time you want

$('.bar').animate({ width: "100%" },2000);

Answer 2

You may try this (using jQuery ui)

$(function() {
    $( "#progressbar" ).progressbar();
    $('#progress').click(function(){
        var progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );
        progressLabel.show();
        progressbar.progressbar({
            value: false,
            change: function() {
                progressLabel.text( progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
                progressLabel.text( "Complete!" );
            }
        });

        function progress() {
            var val = progressbar.progressbar( "value" ) || 0;
            progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
                setTimeout( progress, 50 );
            }
        }
        setTimeout( progress, 10 );
    });
});

DEMO.