Animated Progress Gauge With jQuery – jsProgressBar

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.