https://www.gemaxxtelecom.com/js/progressbar/progress.js

1(function( $ ){
2  // Simple wrapper around jQuery animate to simplify animating progress from your app
3  // Inputs: Progress as a percent, Callback
4  // TODO: Add options and jQuery UI support.
5  $.fn.animateProgress = function(progress, callback) {    
6    return this.each(function() {
7      $(this).animate({
8        width: progress+'%'
9      }, {
10        duration: 2000, 
11        
12        // swing or linear
13        easing: 'swing',
14
15        // this gets called every step of the animation, and updates the label
16        step: function( progress ){
17          var labelEl = $('.ui-label', this),
18              valueEl = $('.value', labelEl);
19          
20          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
21            labelEl.hide();
22          }else{
23            if (labelEl.is(":hidden")) {
24              labelEl.fadeIn();
25            };
26          }
27          
28          if (Math.ceil(progress) == 100) {
29            labelEl.text('Done');
30            setTimeout(function() {
31              labelEl.fadeOut();
32            }, 1000);
33          }else{
34            valueEl.text(Math.ceil(progress) + '%');
35          }
36        },
37        complete: function(scope, i, elem) {
38          if (callback) {
39            callback.call(this, i, elem );
40          };
41        }
42      });
43    });
44  };
45})( jQuery );
46
47$(function() {
48  // Hide the label at start
49  $('#progress_bar .ui-progress .ui-label').hide();
50  // Set initial value
51  $('#progress_bar .ui-progress').css('width', '7%');
52
53  // Simulate some progress
54  $('#progress_bar .ui-progress').animateProgress(99, function() {
55    $(this).animateProgress(99, function() {
56      setTimeout(function() {
57        $('#progress_bar .ui-progress').animateProgress(99, function() {
58          $('#main_content').slideDown();
59          $('#fork_me').fadeIn();
60        });
61      }, 2000);
62    });
63  });
64  
65});
66
67
68$(function() {
69  // Hide the label at start
70  $('#progress_bar2 .ui-progress .ui-label').hide();
71  // Set initial value
72  $('#progress_bar2 .ui-progress').css('width', '7%');
73
74  // Simulate some progress
75  $('#progress_bar2 .ui-progress').animateProgress(90, function() {
76    $(this).animateProgress(90, function() {
77      setTimeout(function() {
78        $('#progress_bar2 .ui-progress').animateProgress(90, function() {
79          $('#main_content').slideDown();
80          $('#fork_me').fadeIn();
81        });
82      }, 2000);
83    });
84  });
85  
86});
87
88
89$(function() {
90  // Hide the label at start
91  $('#progress_bar3 .ui-progress .ui-label').hide();
92  // Set initial value
93  $('#progress_bar3 .ui-progress').css('width', '7%');
94
95  // Simulate some progress
96  $('#progress_bar3 .ui-progress').animateProgress(85, function() {
97    $(this).animateProgress(85, function() {
98      setTimeout(function() {
99        $('#progress_bar3 .ui-progress').animateProgress(85, function() {
100          $('#main_content').slideDown();
101          $('#fork_me').fadeIn();
102        });
103      }, 2000);
104    });
105  });
106  
107});
108
109
110$(function() {
111  // Hide the label at start
112  $('#progress_bar4 .ui-progress .ui-label').hide();
113  // Set initial value
114  $('#progress_bar4 .ui-progress').css('width', '7%');
115
116  // Simulate some progress
117  $('#progress_bar4 .ui-progress').animateProgress(90, function() {
118    $(this).animateProgress(90, function() {
119      setTimeout(function() {
120        $('#progress_bar4 .ui-progress').animateProgress(90, function() {
121          $('#main_content').slideDown();
122          $('#fork_me').fadeIn();
123        });
124      }, 2000);
125    });
126  });
127  
128});