Skip to main content

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 .

Comments

Post a Comment

Popular posts from this blog

Samsung Galaxy On8 full review

Samsung launched its most awaited device Samsung Galaxy On8.It will be available only on Flipkart the E-commerce giant.This phone will be available on Flipkart from October 2nd midnight during BigBillion day sale.

Earn money online for free

In this era of internet it is very easy to earn extra money without doing much hard work.We can earn Rs 10000/- to Rs 50000/- per month just spending few minutes on internet . There are many sites which give us money for viewing adds , reading email , clicking on adds, playing game , making a survey etc .

How to Create Blog Through Google Blogger.

Hey Guy's In this i will be showing you all guy's how to create Blog .Creating a Blog is very easy task if you had all tool in hand . There are many question comes in mind when talk about a creating a blog .
Why one Should Create a Blog
Where to Create a Blog ?How to create a Blog ?Can we earn money through the Blog ? and many more such questions .Here i will be answering each and every question.
What is Blog?