Bootstrap progress

Example of using a progress indicator from bootstrap.

by Dejan Vasic

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="row-fluid">
    <button class="btn">Start</button>
</div>

<div class="progress progress-striped active">
    <div class="bar">
        <span id="loadingText"></span>
    </div>
</div>

JavaScript

var count = 0;

$().ready(function(){
    $('button').on('click', function(){
        count = count + 10;
        setTimeout(function() {loadSomething(count);}, 2000);
    });
});

function loadSomething(width){
    $('#loadingText').text('Please wait');
    $('.bar').css('width', width + "%");
}