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

7 comments:

  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
  2. I am glad to read this. Thank you for this beautiful content, Keep it up. Techavera is the best Selenium training course in Noida. Visit us For Quality Learning.Thank you

    ReplyDelete
  3. Nice article . Thank you for this beautiful content, Keep it up. Techavera is the best
    Angular JS Training in Noida.
    Visit us For Quality Learning.Thank you

    ReplyDelete
  4. Thanks. really useful article.

    If you want to logo designing services than visit - Logo Designing Services Jaipur | Logo Designer in Jaipur | Logo maker in Jaipur

    ReplyDelete
  5. Hiii...Thanks for Sharing Great info...Nice post...Keep move on...
    Angular JS Training in Hyderabad

    ReplyDelete
  6. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    top angularjs online training
    best angularjs online training
    angularjs online training

    ReplyDelete
  7. Thanks for the blog article.Much thanks again. Fantastic.
    python online training
    python training

    ReplyDelete