Post
Ask Question

Progress Bar in JavaScript

Introduction

 
In this article, we will create a progress bar using JavaScript. Here we show two examples of a Progress Bar Image. Now we discuss the first one, for this follow these steps:

Step 1: First we create a table and put four columns in it.
  1. <table style="width: 1257px" >  
  2.     <tr>  
  3.     <td ></td>  
  4.     <td >  
  5.     <table border="1">  
  6.     <tr>  
  7.     <td id="td1" class="style8"> </td>  
  8.     <td id="td2" class="style8"> </td>  
  9.     <td id="td3" class="style8"> </td>  
  10.     <td id="td4" class="style8"> </td>  
  11.     </tr>  
  12.   </table>  
  13. </td>  
  14.     <td></td>  
  15.     <td></td>  
  16.     </tr>  
  17.      
  18.     </table> 
Step 2: After that, we write the Show() function on the onload event of the <body> tag. So when the page is loaded the function will be called.
  1. <body onload="Show()">  
  2. .....  
  3. ...  
  4. </body> 
Step 3: Now we write the JavaScript function. In this function, first, we change the color of the first column, then we call another function with the help of setTimeout and then we change the color of the second column, like this:
  1. <script language="javascript" type="text/javascript">  
  2.     function Show()  
  3.     {  
  4.     document.getElementById('td1').style.backgroundColor='Blue';  
  5.     document.getElementById('td2').style.backgroundColor='White';  
  6.     document.getElementById('td3').style.backgroundColor='White';  
  7.     document.getElementById('td4').style.backgroundColor='White';  
  8.     setTimeout("Show1()",300);  
  9.     }  
  10.      function Show1()  
  11.     {  
  12.     document.getElementById('td2').style.backgroundColor='Blue';  
  13.     document.getElementById('td1').style.backgroundColor='White';  
  14.     document.getElementById('td3').style.backgroundColor='White';  
  15.     document.getElementById('td4').style.backgroundColor='White';  
  16.     setTimeout("Show2()",300);  
  17.     }  
  18.      function Show2()  
  19.     {  
  20.     document.getElementById('td3').style.backgroundColor='Blue';  
  21.     document.getElementById('td1').style.backgroundColor='White';  
  22.     document.getElementById('td2').style.backgroundColor='White';  
  23.     document.getElementById('td4').style.backgroundColor='White';  
  24.     setTimeout("Show3()",300);  
  25.     }  
  26.      function Show3()  
  27.     {  
  28.     document.getElementById('td4').style.backgroundColor='Blue';  
  29.     document.getElementById('td2').style.backgroundColor='White';  
  30.     document.getElementById('td3').style.backgroundColor='White';  
  31.     document.getElementById('td1').style.backgroundColor='White';  
  32.     setTimeout("Show()",300);  
  33.     }  
  34.     </script> 
The Output will be

PrgBar1.jpg

Now we look at another example of a progress bar.

Step 1: First we create a table like this and put some columns in it.
  1. <table style="width: 1257px" >  
  2.     <tr>  
  3.     <td class="style6"></td>  
  4.     <td class="style1">  
  5.     <table border="1" cellpadding="0"  cellspacing="0">  
  6.     <tr>  
  7.     <td id="td1" class="style8" style="border-style: none">L</td>  
  8.     <td id="td2" class="style8" style="border-style: none">o</td>  
  9.     <td id="td3" class="style8" style="border-style: none">a</td>  
  10.     <td id="td4" class="style8" style="border-style: none">d</td>  
  11.     <td id="td5" class="style8" style="border-style: none">i</td>  
  12.     <td id="td6" class="style8" style="border-style: none">n</td>  
  13.     <td id="td7" class="style8" style="border-style: none">g</td>  
  14.     <td id="td8" class="style8" style="border-style: none">...</td>  
  15.     <td id="td9" class="style8" style="border-style: none">.</td>  
  16.     </tr>  
  17. </table>  
  18. </td>  
  19.     <td></td>  
  20.     <td></td>  
  21.     </tr>  
  22.     </table> 
The output will be

PrgBar2.jpg

Step 2: After that, we write the Show() function on the onload event of the <body> tag. So when the page is loaded the function will be called.
  1. <body onload="Show()">  
  2. .....  
  3. ...  
  4.    
  5. </body> 
Step 3: Now we write the JavaScript function. In this function, first we change the color of the first column and then the second column like this:
  1. <script language="javascript" type="text/javascript">  
  2.  function Show()  
  3.  {  
  4.  document.getElementById('td1').style.backgroundColor='Blue';  
  5.  setTimeout("Show1()",300);  
  6.  }  
  7.  function Show1()  
  8.  {  
  9.  document.getElementById('td2').style.backgroundColor='Blue';  
  10.  setTimeout("Show2()",300);  
  11.  }  
  12.  function Show2()  
  13.  {  
  14.  document.getElementById('td3').style.backgroundColor='Blue';  
  15.  setTimeout("Show3()",300);  
  16.  }  
  17.  function Show3()  
  18.  {  
  19.  document.getElementById('td4').style.backgroundColor='Blue';  
  20.  setTimeout("Show4()",300);  
  21.  }  
  22.  function Show4()  
  23.  {  
  24.  document.getElementById('td5').style.backgroundColor='Blue';  
  25.  setTimeout("Show5()",300);  
  26.  }  
  27.  function Show5()  
  28.  {  
  29.  document.getElementById('td6').style.backgroundColor='Blue';  
  30.  setTimeout("Show6()",300);  
  31.  }  
  32.  function Show6()  
  33.  {  
  34.  document.getElementById('td7').style.backgroundColor='Blue';  
  35.  setTimeout("Show7()",300);  
  36.  }  
  37.  function Show7()  
  38.  {  
  39.  document.getElementById('td8').style.backgroundColor='Blue';  
  40.  setTimeout("Show8()",300);  
  41.  }  
  42.  function Show8()  
  43.  {  
  44.  document.getElementById('td9').style.backgroundColor='Blue';  
  45.   
  46.  }  
  47.   
  48.  </script> 
The output will be

PrgBar3.jpg


Similar Articles