<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="span4"> <h1>Formatting drive C:</h1> <div id="Formated_check"> <span id="loading"></span></span>% Formatted <span class="pull-right">Please wait...</span> </div> <div id="Complete_message"> <span id="complete"></span></span> </div> <div id="progress_bar" class="progress progress-striped active"> <div class="bar" id="bar" style="width: 0%;"></div> </div> <p> <button class="btn btn-primary disabled" type="button">Format</button> <button class="btn btn-mini" id="test" type="button">Start</button> </p> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#test").click(function(){ for(i=1;i<=300;i++) { $("#bar").css("width",i); $("#loading").text("Excuted.."); if(i==100) { setTimeout(function(){ $("#loading").text("Complete ..."); $("#bar").css("width",400); },3000) ; } } }); }); </script>