<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style=""> Your Profile is 50% Completed.</div> </div>

.bar-success { background-color: #5cb85c;} .bar-info { background-color: #5bc0de;} .bar-warning { background-color: #f0ad4e;} .bar-danger { background-color: #d9534f;}

$(document).ready( function(){ window.percent = 0; window.progressInterval = window.setInterval( function(){ if(window.percent < 88) { window.percent++; $('.progress').addClass('progress-striped').addClass('active'); $('.progress .progress-bar:first').removeClass().addClass('progress-bar') .addClass ( (percent < 40) ? 'progress-bar-danger' : ( (percent < 80) ? 'progress-bar-warning' : 'progress-bar-success' ) ) ; $('.progress .progress-bar:first').width(window.percent+'%'); $('.progress .progress-bar:first').text(window.percent+'%'); } else { window.clearInterval(window.progressInterval); // jQuery('.progress').removeClass('progress-striped').removeClass('active'); //jQuery('.progress .progress-bar:first').text('Done!'); } }, 100 ); });