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

  1. This comment has been removed by the author.

    ReplyDelete

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.

5 Important Facts about facebook that every one should know.

Today, I was using facebook and and I realised that I was just using it and but actually was not knowing any thing about it. For that I started digging into it and I found some important fact that very few people know and talk. These facts were small but important in terms of user experience.

1. How does Facebook generate its revenue?
Most of the revenue is generated from the advertisement.But comparatively very less than google. Because of low CTR (Click through rate).Means that if 80000 users are clicking on adds among 1million searches on google.  400 people click on ads on Facebook among 1million.

One more source of income is from selling of user’s data to third parties.
You will be amazed by seeing the revenue growth of the Facebook from starting
Year Revenue Growth 2004 $0.4 — 2005 $9 2150% 2006 $48 433% 2007 $153 219% 2008 $280 83% 2009

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 .