Animated Progress Gauge With jQuery – jsProgressBar
File Size: | 6.05 KB |
---|---|
Views Total: | 1083 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<link rel="stylesheet" href="/path/to/src/jsProgressGauge.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/jsProgressGauge.js"></script>
2. Create a container to hold the progress bar.
<div id="example"></div>
3. Generate a basic progress bar and determine the progress percentage-value as follows:
$("#example").JsProgressGauge({ // default: 100 value: 50 });
4. Set the direction of the progress bar. Default: 'line' (horizontal).
$("#example").JsProgressGauge({ // vertical type: 'column' });
5. Determine whether to enable the fill animation. Default: true.
$("#example").JsProgressGauge({ animated: true, duration: 1000 });
6. Customize the appearance of the progress bar.
$("#example").JsProgressGauge({ // show label showLabel: true, // show title showTitle: true, // custom title here title: '', // unit labelUnit: '%', // background color fillBackgroundColor: '#3498db', backgroundColor: '#EEEEEE', // border-radius barRadius: 4, fillRadius: 0, // left,center or right labelAlignment: 'right', // top,center or bottom labelPosition: 'top', // font size labelFontSize: 14, titleFontSize: null, // text color labelColor: '#000', titleColor: '#000', // bar height barHeight: '15px', fillSize: '15px', // width width: '100%', // bold labels boldLabels: false, // rotate labels rotateLabels: false });
7. Customize the label with a custom function.
$("#example").JsProgressGauge({ labelFormatter: function(percent, htmlDisplayElement){ // ... } });
8. Trigger a function when progress is complete.
$("#example").JsProgressGauge({ onFinish: () => alert("Gauge: Loading Finished") });
This awesome jQuery plugin is developed by Calvin-2DWeb. For more Advanced Usages, please check the demo page or visit the official website.