JQuery UI Progressbar


 It provides the ability to animate the progress-bar by adding JavaScript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.    

                                                                                                                                        Download Source Code 

Index.html                                                                                                                                    Download Source Code
  1. $(document).ready(function(){
  2.     jQuery.fn.anim_progressbar = function (aOptions) {
  3.         // def values
  4.         var iCms = 1000;
  5.         var iMms = 60 * iCms;
  6.         var iHms = 3600 * iCms;
  7.         var iDms = 24 * 3600 * iCms;

  8.         // def options
  9.         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. });
 Download Source Code


Ref URL : http://jqueryui.com/progressbar/#default




Previous
Next Post »

2 comments

Click here for comments