Simple Progress Bar using Jquery

• Download source - 154.6 KB

Introduction

A very simple progress bar with few lines of HTML and JQuery code. Progress bar is often helpful while uploading file or to show any progress on website.

There are many ways in which you can implement progress bar. Here, I am showing you one of the simplest ways.

Using the Code

I have attached code which is self explanatory and very easy to understand. HTML is very straight forward having dropdown and divs to design.

Here, I will only explain Jquery which is itself easy.

<script type="text/javascript">
            $(document).ready(function () {
 
                $("#btnAnimation").on('click', function () {
                    //Function call
                    ProgressBar(currentPercentage);
                });
 
                //Progress bar function
                function ProgressBar(currentPercentage) {
                    $("#divInner").animate({
                        'width': (500 * currentPercentage) / 100
                    }, {
                        duration: 2000,
                        step: function (now, tween) {
                            $("#divInner").text(Math.ceil((now / 500) * 100) + "%");
                        }
                    });
                }
            });
 
</script>

Let's look at the code to see what is going on.
Let's say user selected 20 from Percentage dropdown. Initially, width of inner div is 0px and width of outer div is 500px. So we want to animate the width of inner div element. To set width of inner div to 20% of outer div element, following is the code:

'width': (500 * currentPercentage) / 100

The width of inner div element will be increased to 0px till 100px, i.e., 20% of 500px.
So at every step of animation while its increasing width, the function which is associated with "step" option is called.

And now parameter is going to contain that value which we are animating. You can see the value of now variable in console window of Chrome by adding console.log(now) and see how value is being increased from 0px- 100px.
Now look at what we are passing as text into inner div element:

$("#divInner").text(Math.ceil((now / 500) * 100) + "%");

as the value of now variable is increasing, get the text for inner div by computing the value for now variable to the total pixels of outer div element.

step: function (now, tween) {
$("#divInner").text(Math.ceil((now/500)*100 )+ "%"); 

So, it will give us the value of current increasing width. That's it. Isn't it simple?

Points of Interest

Animate function of Jquery have really good power to make efficient web pages. Go to https://jquery.com and see more about animate function. Practical stuff is attached as demo. You will easily understand when you download it.

Any Questions?

Please free to ask any questions you have related to this tip.