animated progress gauge - Free Download Animated Progress Gauge With jQuery – jsProgressBar

Free Download Animated Progress Gauge With jQuery – jsProgressBar

Posted on

This time I will share jQuery Plugin and tutorial about Animated Progress Gauge With jQuery – jsProgressBar, hope it will help you in programming stack.

animated progress gauge - Free Download Animated Progress Gauge With jQuery – jsProgressBar
File Size: 6.05 KB
Views Total: 355
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.

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({
2   // default: 100
3   value: 50
4 });

4. Set the direction of the progress bar. Default: ‘line’ (horizontal).

1 $("#example").JsProgressGauge({
2   // vertical
3   type: 'column'
4 });

5. Determine whether to enable the fill animation. Default: true.

1 $("#example").JsProgressGauge({
2   animated: true,
3   duration: 1000
4 });

6. Customize the appearance of the progress bar.

01 $("#example").JsProgressGauge({
02  
03   // show label
04   showLabel: true,
05  
06   // show title
07   showTitle: true,
08  
09   // custom title here
10   title: '',
11    
12   // unit
13   labelUnit: '%',
14    
15   // background color
16   fillBackgroundColor: '#3498db',
17   backgroundColor: '#EEEEEE',
18  
19   // border-radius
20   barRadius: 4,
21   fillRadius: 0,
22  
23   // left,center or right
24   labelAlignment: 'right',
25  
26   // top,center or bottom
27   labelPosition: 'top',
28  
29   // font size
30   labelFontSize: 14,
31   titleFontSize: null,
32  
33   // text color
34   labelColor: '#000',
35   titleColor: '#000',
36    
37   // bar height
38   barHeight: '15px',
39   fillSize: '15px',
40  
41   // width
42   width: '100%',
43  
44   // bold labels
45   boldLabels: false,
46  
47   // rotate labels
48   rotateLabels: false
49    
50 });

7. Customize the label with a custom function.

1 $("#example").JsProgressGauge({
2  
3   labelFormatter: function(percent, htmlDisplayElement){
4     // ...
5   }
6  
7 });

8. Trigger a function when progress is complete.

1 $("#example").JsProgressGauge({
2  
3   onFinish: () => alert("Gauge: Loading Finished")
4  
5 });