This time I will share jQuery Plugin and tutorial about jQuery Plugin For Handling Progress Percentage, hope it will help you in programming stack.
| File Size: | 6.53 KB |
|---|---|
| Views Total: | 633 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Progress LGH is a lightweight, framework-agnostic jQuery progress plugin that makes it easier to set, get, and update percentage values in a progress bar component.
Works with popular frameworks like Bootstrap‘s progress bar component and supports real-time percentage calculation base on the response from an API.
See Also:
How to use it:
1. Load the Progress LGH plugin’s script after jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/js/jquery-progress-lgh.js"></script> |
2. Add a progress bar component (like Bootstrap progressbar) to your webpage.
1 |
<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="demo"></div> |
3. Set and get percentage values using the following callback functions.
01 |
const progress = new Progress({ |
02 |
get: function () { |
03 |
percentage = percentage + Math.random()*10|0; |
04 |
if(percentage>100){ |
05 |
percentage = 100; |
06 |
} |
07 |
progress.update(percentage); |
08 |
}, |
09 |
set: function (percentage) { |
10 |
switch(type) { |
11 |
case 'bootstrap': |
12 |
filter.css('width', percentage+'%').text(percentage+'%'); |
13 |
break; |
14 |
case 'layui': |
15 |
element.progress(filter, percentage + '%'); |
16 |
if (index && percentage === 100) { |
17 |
layer.close(index); |
18 |
} |
19 |
break; |
20 |
default: |
21 |
} |
22 |
} |
23 |
}); |
4. Or get percentage values base on the response from an API (JSON).
1 |
const progress = new Progress({ |
2 |
url: '/path/to/API', |
3 |
data: { |
4 |
// parameters here |
5 |
}, |
6 |
set: function (percentage) { |
7 |
// update the progress bar |
8 |
} |
9 |
}); |
5. Start the progress bar when needed.
1 |
progress.start(); |
6. More plugin configurations.
01 |
const progress = new Progress({ |
02 |
03 |
// current percentage |
04 |
percentage: 0, |
05 |
06 |
// debounce options |
07 |
debounce: true, |
08 |
debouncePercentage: 0, |
09 |
|
10 |
// progress timer |
11 |
pf0: null, |
12 |
13 |
// debounce timer |
14 |
pf1: null, |
15 |
16 |
// progress delay |
17 |
pf0Delay: 1000, |
18 |
19 |
// debounce delay |
20 |
pf1Delay: 50 |
21 |
|
22 |
}); |
7. More API methods.
1 |
// update the progress bar with or without debounce |
2 |
progress.update(percentage, jump); |
3 |
4 |
// update the progress bar to 100% |
5 |
progress.finish(); |
6 |
7 |
// reset the progress bar |
8 |
progress.reset(); |
