Hello All, We are going to start new batch from next week. message/call or mail us for more details.

Progress Bar in JavaScript



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.
<table style="width: 1257px" >    <tr>    <td ></td>    <td >    <table border="1">    <tr>    <td id="td1" class="style8">&nbsp;</td>    <td id="td2" class="style8">&nbsp;</td>    <td id="td3" class="style8">&nbsp;</td>    <td id="td4" class="style8">&nbsp;</td>    </tr>  </table></td>    <td></td>
    <td></td>    </tr>    
    </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.
<body onload="Show()">.....
...
</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:
<script language="javascript" type="text/javascript">    function Show()
    {
    document.getElementById('td1').style.backgroundColor='Blue';
    document.getElementById('td2').style.backgroundColor='White';
    document.getElementById('td3').style.backgroundColor='White';
    document.getElementById('td4').style.backgroundColor='White';
    setTimeout("Show1()",300);
    }
     function Show1()
    {
    document.getElementById('td2').style.backgroundColor='Blue';
    document.getElementById('td1').style.backgroundColor='White';
    document.getElementById('td3').style.backgroundColor='White';
    document.getElementById('td4').style.backgroundColor='White';
    setTimeout("Show2()",300);
    }
     function Show2()
    {
    document.getElementById('td3').style.backgroundColor='Blue';
    document.getElementById('td1').style.backgroundColor='White';
    document.getElementById('td2').style.backgroundColor='White';
    document.getElementById('td4').style.backgroundColor='White';
    setTimeout("Show3()",300);
    }
     function Show3()
    {
    document.getElementById('td4').style.backgroundColor='Blue';
    document.getElementById('td2').style.backgroundColor='White';
    document.getElementById('td3').style.backgroundColor='White';
    document.getElementById('td1').style.backgroundColor='White';
    setTimeout("Show()",300);
    }
    </script>

The Output will be:

PrgBar1.jpg

Now we look at an another example of a progress bar.

Step 1: First we create a table like this and put some columns in it.
<table style="width: 1257px" >    <tr>    <td class="style6"></td>    <td class="style1">    <table border="1" cellpadding="0"  cellspacing="0">    <tr>    <td id="td1" class="style8" style="border-style: none">L</td>    <td id="td2" class="style8" style="border-style: none">o</td>    <td id="td3" class="style8" style="border-style: none">a</td>    <td id="td4" class="style8" style="border-style: none">d</td>    <td id="td5" class="style8" style="border-style: none">i</td>    <td id="td6" class="style8" style="border-style: none">n</td>    <td id="td7" class="style8" style="border-style: none">g</td>    <td id="td8" class="style8" style="border-style: none">...</td>    <td id="td9" class="style8" style="border-style: none">.</td>    </tr></table>
</
td>    <td></td>    <td></td>    </tr>    </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.
<body onload="Show()">.....
...
 
</
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:
 
    <script language="javascript" type="text/javascript">
    function Show()
    {
    document.getElementById('td1').style.backgroundColor='Blue';
    setTimeout("Show1()",300);
    }
    function Show1()
    {
    document.getElementById('td2').style.backgroundColor='Blue';
    setTimeout("Show2()",300);
    }
    function Show2()
    {
    document.getElementById('td3').style.backgroundColor='Blue';
    setTimeout("Show3()",300);
    }
    function Show3()
    {
    document.getElementById('td4').style.backgroundColor='Blue';
    setTimeout("Show4()",300);
    }
    function Show4()
    {
    document.getElementById('td5').style.backgroundColor='Blue';
    setTimeout("Show5()",300);
    }
    function Show5()
    {
    document.getElementById('td6').style.backgroundColor='Blue';
    setTimeout("Show6()",300);
    }
    function Show6()
    {
    document.getElementById('td7').style.backgroundColor='Blue';
    setTimeout("Show7()",300);
    }
    function Show7()
    {
    document.getElementById('td8').style.backgroundColor='Blue';
    setTimeout("Show8()",300);
    }
    function Show8()
    {
    document.getElementById('td9').style.backgroundColor='Blue';
  
    }
   
    </script>

The output will be:

PrgBar3.jpg

1 comment:

  1. how we make a progress bar according the data load , as if uploading a file then it show % how much file upload

    the example u tell is not better , its timeout is static we given , it is not gud working for file upload
    pls give some idea for upload % show

    ReplyDelete