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
download in package
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://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
download in package
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!
Related Articles
How to Create your own jQuery Slider Plugin
Creating a Photo Album with Galleriffic jQuery plugin
How to Add Audio and Video on your Website using jPlayer plugin (jQuery)
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