Animated jQuery Progressbar Plugin

Tutorials

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

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
05 <link href="css/main.css" rel="stylesheet" type="text/css" />
06 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
07 <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
08 <script type="text/javascript" src="js/script.js"></script>
09 <title>Animated jQuery progressbar | Script tutorials</title>
10 </head>
11 <body>
12     <div class="example">
13         <h3><a href="https://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3>
14         <div id="progress1">
15             <div class="percent"></div>
16             <div class="pbar"></div>
17             <div class="elapsed"></div>
18         </div>
19         <hr />
20         <div id="progress2">
21             <div class="percent"></div>
22             <div class="pbar"></div>
23             <div class="elapsed"></div>
24         </div>
25         <hr />
26         <div id="progress3">
27             <div class="percent"></div>
28             <div class="pbar"></div>
29             <div class="elapsed"></div>
30         </div>
31     </div>
32 </body>
33 </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

1 body{background:#eee;font-family:VerdanaHelveticaArialsans-serif;margin:0;padding:0}
2 .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}
3 h3 {text-align:center}
4 .pbar .ui-progressbar-value {display:block !important}
5 .pbar {overflowhidden}
6 .percent {position:relative;text-alignright;}
7 .elapsed {position:relative;text-alignright;}

Step 3. JS

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

js/script.js

01 $(document).ready(function(){
02     jQuery.fn.anim_progressbar = function (aOptions) {
03         // def values
04         var iCms = 1000;
05         var iMms = 60 * iCms;
06         var iHms = 3600 * iCms;
07         var iDms = 24 * 3600 * iCms;
08         // def options
09         var aDefOpts = {
10             start: new Date(), // now
11             finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec
12             interval: 100
13         }
14         var aOpts = jQuery.extend(aDefOpts, aOptions);
15         var vPb = this;
16         // each progress bar
17         return this.each(
18             function() {
19                 var iDuration = aOpts.finish - aOpts.start;
20                 // calling original progressbar
21                 $(vPb).children('.pbar').progressbar();
22                 // looping process
23                 var vInterval = setInterval(
24                     function(){
25                         var iLeftMs = aOpts.finish - new Date(); // left time in MS
26                         var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
27                             iDays = parseInt(iLeftMs / iDms), // elapsed days
28                             iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
29                             iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
30                             iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
31                             iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
32                         // display current positions and progress
33                         $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
34                         $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
35                         $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
36                         // in case of Finish
37                         if (iPerc >= 100) {
38                             clearInterval(vInterval);
39                             $(vPb).children('.percent').html('<b>100%</b>');
40                             $(vPb).children('.elapsed').html('Finished');
41                         }
42                     } ,aOpts.interval
43                 );
44             }
45         );
46     }
47     // default mode
48     $('#progress1').anim_progressbar();
49     // from second #5 till 15
50     var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
51     var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
52     $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
53     // we will just set interval of updating to 1 sec
54     $('#progress3').anim_progressbar({interval: 1000});
55 });

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!

Rate article