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 wrap our result as a new jQuery plugin.
Here are our demo and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
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="https://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!
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.
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
So cool and nice.
Appreciated.
thanks
Is there a way to put text on progress bar? Sort of like old DOS-like progress-bar?
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.
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
how can I add functunality? I want to update it while it run?
Hi Roee,
But we already update our elements in periodic code. Check code under the comment ‘display current positions and progress’
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.
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)
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.
How can we invoke a callback on this?
once its complete and finished, run another ajax call?
Hello Marty,
Yes, you can add own functions (callbacks) into this code.
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).
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.
Awesome you rock….
Thank you very much for you work, i’m going to test this with .Net :)
Nice…
How to implement it with cURL?
Please help.
You can enable curl in your php settings. How exactly – depends only on your hosting.
In case of WAMP (localhost) – you can easily select desired addons for PHP in settings of this program, in case of unix:
http://stackoverflow.com/questions/8014482/php-curl-enable-linux
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 });
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 :)
Hello Oscar,
This is a difference between both timers (begin and end).
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
Hello,
‘Progressbar’ is Free plugin, this is the part of jQuery UI
Is it possible to stop this progress bar upon click button?
Hello Anthony,
Yes, you can try to use
clearInterval(vInterval);
to stop it
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.
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.
Hi Kasun,
In your case, you should point both dates properly (as 01.09.2013 and 30.01.2014)
this is a excellent plugin and the author is brillient!
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).
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
Hi Douglas,
With regards to the upload process, I think that you’d better refer to the native html5 upload method: https://www.script-tutorials.com/pure-html5-file-upload/
It has this opportunity to update the progress bar depending on upload status.
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!
Hi Ro,
Yes, you just need to display a certain value (depending on time) without any animation.
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+’%’);
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.