https://nancytranter.com/js/progressbar/progress.js

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