This time I will share jQuery Plugin and tutorial about Animated Progress Gauge With jQuery – jsProgressBar, hope it will help you in programming stack.
A JavaScript library to render animated, fully configurable progress bars using plain JavaScript. No SVG, Canvas, or Image required.
Features:
- Column and Line layouts.
- With fill animation or not.
- Custom title and label.
How to use it:
1. Start by including the jsProgressBar plugin’s files in your app.
1 |
< link rel = "stylesheet" href = "/path/to/src/jsProgressGauge.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/src/jsProgressGauge.js" ></ script > |
2. Create a container to hold the progress bar.
1 |
< div id = "example" ></ div > |
3. Generate a basic progress bar and determine the progress percentage-value as follows:
1 |
$( "#example" ).JsProgressGauge({ |
4. Set the direction of the progress bar. Default: ‘line’ (horizontal).
1 |
$( "#example" ).JsProgressGauge({ |
5. Determine whether to enable the fill animation. Default: true.
1 |
$( "#example" ).JsProgressGauge({ |
6. Customize the appearance of the progress bar.
01 |
$( "#example" ).JsProgressGauge({ |
16 |
fillBackgroundColor: '#3498db' , |
17 |
backgroundColor: '#EEEEEE' , |
24 |
labelAlignment: 'right' , |
7. Customize the label with a custom function.
1 |
$( "#example" ).JsProgressGauge({ |
3 |
labelFormatter: function (percent, htmlDisplayElement){ |
8. Trigger a function when progress is complete.
1 |
$( "#example" ).JsProgressGauge({ |
3 |
onFinish: () => alert( "Gauge: Loading Finished" ) |