Creating progress bar using JavaScript and Bootstrap And code of progress bar.

Hey guy's in this tutorial i talk about making a working progress bar using BootStrap and javascript . Here in this tutorial i will be showing some code and effects that can be used to make a progrress bar. First of all Why does we use progress bar ?.
This question would be arising in yours mind while reading this blog .Then answer is progress bar is some events that help us to show progress of some events like "page is loading" and this xyz% the page is loaded or can be used to show the loading of the image or any event carried by ajax.

Making the progress bar really easy stuff all css part is taken out by the bootStrap just you have to take care of coding part .You have to only worry about the coding script other wise all other stuff are taken care by bootstrap.In this i will show you all readers a example with code that will help you to create a working progress bar with ease
Below is the example show how the progress ball will work when some event is done like clicking the button .Bellow is the code showing the triggering of the event that is carried out when button is click . Instead of show this event you just have to change the script that should run while the page is loaded or showing percentage of completeness of some events .

Below is code for above example .This code shows how the button is clicked and progress bar start showing progress

 <script >
    var j;
  var my;
 
   function call(){
   j++;
 
$("#x").css("width",j+"%");
document.getElementById("demo").innerHTML=j+"%";

if(j==100)
  {

clearInterval(my);
  }


     
   }
 
   function bar(){
 $("#x").css("width",j+"%");
  j=0;
   my=setInterval(function(){ call();},100);
 
   }

   </script>

<div class="progress">
  <div id="x" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:0%" >
   </div>


</div>
<div id="demo"></div>
<button type="button" onclick="bar();">click to run progress bar</button>
  </div>

Explanation !
When ever the button is clicked then bar(); function is called and which set the value of j variable as 0 and set it's value in css property of "id =x" div "

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" class="progress-bar progress-bar-striped active" id="x" role="progressbar" style="width: 0%;">"

And setInterval(function(){ call();},100); which regularly call for call(); after each 100 millisecond until intervalclear() function is called . This set the width value from 0 to 100% regularly .