Html Progress Bar

Progress Bar is a good tool to display the progress of any content which takes time to load. Progress Bar helps the user to understand the status of the task running behind, otherwise users think that the page is not working when the page is performing some task like saving the content or loading the data.

Here in my post I am going explain a simple progress bar made of simple HTML tags and jQuery. You can learn jQuery here http://www.w3schools.com/jquery/default.asp which is very easy to learn.
Below is the progress bar which I implemented...

Progress Bar Running

Similar to my recent posts we will start from scratch. First the logic behind the progress bar is to use Parent and Child div's. Parent div will act as border and child div will act as a progress bar. Then when the user clicks on the next button we will just increase the width of the child div which appears as a progress bar to the user. Here we will use table to make the progress bar look good.

Below is the parent and child div...
<div id="Parent">
    <div id="Child">
     </ div>
</div>​
Now we will wrap the progress bar with a table, below is the html code
<table id="tbl_progress" width="50%" border="1px">
        <tr>
            <td colspan="3" style="height: 20px">
                <div id="Parent">
                    <div id="Child">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center">
                <input type="button" id="btn_prev" value="Prev" />
            </td>
            <td style="text-align: center">
                <input type="button" id="btn_next" value="Next" />
            </td>
            <td style="text-align: center">
                <input type="button" id="btn_clear" value="Clear" />
            </td>
        </tr>
</table>​
Now we will apply some Css styling to order the contents and set the background color for the child div which is very important since it the main logic behind the working of progress bar
The Css code is shown below
#Parent
{
    position:relative;
    left:15%;     
    width:200px;
    height:10px;
    border:thin solid Black;    
}
#Child
{
    position:relative;
    left:0px;
    top:0px;
    width:200px;
    height:10px;
    background-color:Green;    
}
#tbl_progress
{
    position:relative;
    left:30%;
    border-collapse:collapse;
    border-color:red   
}​
After applying Css the Html progress bar with progress 0% is shown below

Progress Bar with 0%

Without any java script our code will not work. When the page loads the progress bar should be empty, to do so we have to set the width of the child div to 0px below is the code
$("#Child").width("0px");
Now when we click the Prev Button the width of the child div have to decrease by some quantity in my case I took it as 20% since my parent div width is 200px so here it will decrease by 20px.
Here is the corresponding javascript...

$("#btn_prev").click(function () {
                if ($("#Child").width() == "0") {
                    window.alert("Progress Bar reached starting point cannot be decreased");
                }
                else {
                    $("#Child").width(($("#Child").width()-$("#Parent").width()/10)+"px")
                }
            });
Similarly when we click the Next button the child div width is increased by 20%

 $("#btn_next").click(function () {

                if ($("#Child").width() == $("#Parent").width()) {

                    window.alert("Progress Bar reached ending point cannot be increased");

                }

                else {

                    $("#Child").width(($("#Child").width() +( $("#Parent").width() / 10))+"px")

                }

            });

And last but not the lest when we click clear we have to reset the child div width to 0px below is the code...

$("#btn_clear").click(function () {                               
                $("#Child").width("0px")               
            });

Here is the entire javascript code... Not to forget the main jQuery Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
<script type="text/javascript">
        $(document).ready(function () {
            $("#Child").width("0px");
            $("#btn_prev").click(function () {
                if ($("#Child").width() == "0") {
                    window.alert("Progress Bar reached starting point cannot be decreased");
                }
                else {
                    $("#Child").width(($("#Child").width()-$("#Parent").width()/10)+"px")
                }
            });
            $("#btn_next").click(function () {
                if ($("#Child").width() == $("#Parent").width()) {
                    window.alert("Progress Bar reached ending point cannot be increased");
                }
                else {
                    $("#Child").width(($("#Child").width() +( $("#Parent").width() / 10))+"px")
                }
            });
            $("#btn_clear").click(function () {                               
                $("#Child").width("0px")               
            });
        });
    </script>​​

Here is the final Output when we run the page...

Progress Bar at 100%