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:
[sociallocker]
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
Here are all html of my demo
index.html
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 > |
15 | < div class = "percent" ></ div > |
16 | < div class = "pbar" ></ div > |
17 | < div class = "elapsed" ></ div > |
21 | < div class = "percent" ></ div > |
22 | < div class = "pbar" ></ div > |
23 | < div class = "elapsed" ></ div > |
27 | < div class = "percent" ></ div > |
28 | < div class = "pbar" ></ div > |
29 | < div class = "elapsed" ></ div > |
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 : Verdana , Helvetica , Arial , sans-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 } |
4 | .pbar .ui-progressbar-value { display : block !important } |
5 | .pbar { overflow : hidden } |
6 | .percent { position : relative ; text-align : right ;} |
7 | .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
01 | $(document).ready( function (){ |
02 | jQuery.fn.anim_progressbar = function (aOptions) { |
06 | var iHms = 3600 * iCms; |
07 | var iDms = 24 * 3600 * iCms; |
11 | finish: new Date().setTime( new Date().getTime() + 60 * iCms), |
14 | var aOpts = jQuery.extend(aDefOpts, aOptions); |
19 | var iDuration = aOpts.finish - aOpts.start; |
21 | $(vPb).children( '.pbar' ).progressbar(); |
23 | var vInterval = setInterval( |
25 | var iLeftMs = aOpts.finish - new Date(); |
26 | var iElapsedMs = new Date() - aOpts.start, |
27 | iDays = parseInt(iLeftMs / iDms), |
28 | iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), |
29 | iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), |
30 | iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), |
31 | iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; |
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+ '%' ); |
38 | clearInterval(vInterval); |
39 | $(vPb).children( '.percent' ).html( '<b>100%</b>' ); |
40 | $(vPb).children( '.elapsed' ).html( 'Finished' ); |
48 | $( '#progress1' ).anim_progressbar(); |
50 | var iNow = new Date().setTime( new Date().getTime() + 5 * 1000); |
51 | var iEnd = new Date().setTime( new Date().getTime() + 15 * 1000); |
52 | $( '#progress2' ).anim_progressbar({start: iNow, finish: iEnd, interval: 100}); |
54 | $( '#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) 🙂
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!