Animated jQuery Progressbar Plugin

Animated jQuery Progressbar Plugin

45 2372
Animated jQuery Progressbar Plugin
Animated jQuery progressbar

Animated jQuery progressbar

Today we will back to back to jQuery tutorials. Today we will make dynamic animated progressbar. I think you already know this jQuery widget – Progressbar. By default – this is static widget without any animation. Today we will expand possibilities of that plugin – we will make it – dynamic. And also will issue our result as a new jQuery plugin.

Here are our demo and downloadable package:

Live Demo

Ok, download the example files and lets start coding !


Step 1. HTML

Here are all html of my demo

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/script.js"></script>

<title>Animated jQuery progressbar | Script tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="http://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3>

        <div id="progress1">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>

        <hr />
        <div id="progress2">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>

        <hr />
        <div id="progress3">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
    </div>
</body>
</html>

As you can see – I prepared 3 progressbars. Each progressbar will have own behaviour (using own properties).

Also, make attention to linked jQuery libraries and styles. How I prepared this? Very easy, goto here, select UI Core and single widget – Progressbar, then – just Download result. You will get package with all necessary libraries (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + related images).

Step 2. CSS

Here are our CSS styles.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}

.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}

Step 3. JS

In this JS we will write expanded plugin for jQuery with our new progressbar.

js/script.js

$(document).ready(function(){
    jQuery.fn.anim_progressbar = function (aOptions) {
        // def values
        var iCms = 1000;
        var iMms = 60 * iCms;
        var iHms = 3600 * iCms;
        var iDms = 24 * 3600 * iCms;

        // def options
        var aDefOpts = {
            start: new Date(), // now
            finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec
            interval: 100
        }
        var aOpts = jQuery.extend(aDefOpts, aOptions);
        var vPb = this;

        // each progress bar
        return this.each(
            function() {
                var iDuration = aOpts.finish - aOpts.start;

                // calling original progressbar
                $(vPb).children('.pbar').progressbar();

                // looping process
                var vInterval = setInterval(
                    function(){
                        var iLeftMs = aOpts.finish - new Date(); // left time in MS
                        var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
                            iDays = parseInt(iLeftMs / iDms), // elapsed days
                            iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
                            iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
                            iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
                            iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages

                        // display current positions and progress
                        $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
                        $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
                        $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');

                        // in case of Finish
                        if (iPerc >= 100) {
                            clearInterval(vInterval);
                            $(vPb).children('.percent').html('<b>100%</b>');
                            $(vPb).children('.elapsed').html('Finished');
                        }
                    } ,aOpts.interval
                );
            }
        );
    }

    // default mode
    $('#progress1').anim_progressbar();

    // from second #5 till 15
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
    var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});

    // we will just set interval of updating to 1 sec
    $('#progress3').anim_progressbar({interval: 1000});
});

In first half you can see our new jQuery plugin – anim_progressbar, in second – several examples of initializations with different params. We will pass to constructor next params: start (date of starting), finish (date of finishing) and interval (interval of updating progressbar). Pretty universal, isn`t it? So you can set here not only different time, but even different days (dates) :)


Live Demo

Conclusion

Not bad, isn`t it? Today’s lesson shows us how we can create dynamic progressbar. Not only that – we can have some progressbars on the same page, sometimes it is useful. Good luck our readers!

SIMILAR ARTICLES


45 COMMENTS

  1. Great plugin.
    i want to ask you.where i have to customze the time e.g day 25 next month 4 hours 60 minutes and 60 second.

    thanx

    • 2 h0p81,
      Please pay attention to our second progressbar. It starts in 5 seconds and will finish in next 15 seconds. You need to have bigger periods.

  2. Its wonderful….
    This is what a need
    But , let me ask one thing ?
    how can I , made the progressive bar in the page load , when finished clear of screen
    hugs.

    • Hello Paulo Jr,
      In this case you should firstly determinate time of page loading (average), and only after – initialize progressbar

    • Hello olo,
      Yes, of course, you can customize text at scrollbar too. You have to focus your attention to periodical function in our script.js file.

  3. Thank u very mucht its very usefull for me, i just deleted the Percentage and elapsed css classes abd added the line $(‘#progress1′).anim_progressbar(); under // in case of Finish to restart the bar

    • Hi Roee,
      But we already update our elements in periodic code. Check code under the comment ‘display current positions and progress’

  4. Is it possible that I use it with php. let support I am running a for loop. In that loop I am running a my sql query. What I want to do is after every query complete it get 5% more progress. So the loop runs 20 times.

  5. Hi Faizan,
    Hmm, but I am not sure that requesting php file (and especially database) 20 times a query is a good idea. You can to try of course. As I see – you have to request your server periodically in this case (with using jquery ajax functions as example)

  6. I want to implement it into my file upload function.
    how can I get the upload progress and return it to this progress bar function?

    • Hello Thomas,
      In your case, you have to estimate average time of uploading. And, set this value for progressbar.

  7. Hi Admin,

    Thanks for you script,so i using php for develop,can i make the progressbar to dynamic ?
    the progressbar’s score same as how many query showing,i have stack for it i am newbie in javascript,
    so thanks for advance :)

    • Hello AND,
      basically you can’t make anything dynamic at the server side. Everything dynamic should be only at client side (javascript).

  8. Hi there,

    I’m using the progress bar above and seem to have issues when replacing the jquery-1.6.2.min with jquery.1.7.2. Any idea why? Should it work?

    Thanks for the help.

    Best regards,

    Pero

    • Hello Pero,
      Do you see any js errors when you use 1.7.2 version? I haven’t tested it yet, I developed this demo with the latest jQuery at that moment.
      Try to check it in firebug and tell me if there is any error.

  9. Why does this return 1 month? when it should be returning a few hours (as of 25/3/2013 9:23pm), Changing month to February gives expect results except that it is currently March not February.

    var startDate = new Date(2013, 03, 25, 0, 0, 0, 0)
    var endDate = new Date(2013, 03, 26, 0, 0, 0, 0)

    var iNow = new Date().setTime(new Date(startDate).getTime() );
    var iEnd = new Date().setTime(new Date(endDate).getTime() );

    $(‘#progress1′).anim_progressbar({ start: startDate, finish: endDate, interval: 1000 });

    • Hi Bill,
      The second param in Date is month, if you want to work with months, you can select a more wide range, for instance:
      var startDate = new Date(2013, 03, 25, 0, 0, 0, 0)
      var endDate = new Date(2013, 06, 26, 0, 0, 0, 0)
      $(‘#progress1′).anim_progressbar({ start: startDate, finish: endDate, interval: 1000 });

  10. Hi, thanks this is awesome! But i don´t get, where are we supposed to insert how much time the progress bar should take? Thanks in advanced :)

  11. hi,
    is this progress bar for free , or i have to pay something for this , here i tried to copy the source code and run the files in my system , the progress bar is not playing here

  12. Can I use this progress bar on page load ? Fore instance .. a submit button takes users to another page where lots of Data being populated from database or any other source.. As you know, this page load takes time depending upon the volume of data being displayed. Can I use this progress bar to display progress of the page load and finally display the loaded page terminating the progress bar. (Once the new page is loaded the progress bar must be stopped automatically and give way to the new page)

    With many thanks

    • Hi ARazak,
      Yes, of course, this is possible. But it would be prudent to assess a time which is required to load a page. In this case you can display the progress-bar properly.

  13. This is a great plugin. But each time I refresh the page, the timer restarts. How to I specify a date (e.g. 30/01/2014) and have the progress bar show count upto it from an earlier date (e.g. 16/09/2013).

    So the progress bar would basically show how much left until I reach that date.

  14. Hello,

    Very nice progress bar with smooth animation, but, it should be better if progress bar start and reset on click of button, ie when user starts something.
    I tried to use clearinterval but couldnt get it to work, (needs global variables?)

    • Hi Nimmy,
      If you need to run the progressbar by an event – you should initialize the progressbar by this event (for example – button onclick event).

  15. Hi mate,
    this is an amazing sample.
    I would like to know if there’s a way to modify the progress bar painting and timing process once it is started.
    Let’s assume we have upload a file and as soon as we upload it we send it to the server side to process it by executing an ajax call. I would love to influence the progress bar endtime in order to display the real time remaining and once the server response is back to the client makes the progress bar reach the end.

    Still my congrats for this article

    Douglas

  16. Hi, I would like to use this bar in the following way can you tell me if its possible and what I have to do to modify the code:

    - Run the bar so it starts at 12midnite GMT for 24 hours
    - Loops when it finishes
    - Does not start again when the page is refreshed

    So basically i want it to countdown 1 day starting at midnight GMT, so no matter which user in any timezone accesses the page they will see the same progress.

    Thanks!

  17. Hi,

    I’m using this plugin for some time now and it works fine so far, but is there any possibility to change the progressbar and the countdown on runtime?

    I tried to just call

    $(‘#progress’).anim_progressbar({start: iNow, finish: iEnd, interval: 1000});

    again with the new values but that didn’t work.

    What i’m trying to do is, the progressbar shows my users the time they have to wait for something, but they can “buy” time so that the “rest-time” gets reduced, and the progressbar and countdown should update accordingly (just via JavaScript, without a page reload).

    Is that possible?

    • Hi Cole,
      Basically, you don’t need to re-initialize it, you only need to change the slider’s position, something like that:
      $(vPb).children(‘.pbar’).children(‘.ui-progressbar-value’).css(‘width’, iPerc+’%’);

  18. hi , I had tired everything to make it work. but nothing works up. not even the progress bar as showing and it is giving any error also so that i would have tried to rectify it.
    Pls Help.

Leave a Reply