jQuery Plugin To Create Animated Gradient Progress Bars

A lightweight and simple-to-use jQuery plugin which lets you generate animated, canvas based progress bars with custom gradient fills. Inspired by the jQuery Circle Progress plugin.

See Also:

• Online CSS Gradient Generator

How to use it:

1. Make sure you have jQuery library and the jQuery Gradient Progress Bar loaded in your document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="gradient-progress-bar.min.js"></script>

2. Create a DIV element that will be served as the container for your progress bar.

<div class="progress-bar"></div>

3. Call the plugin to render an animated progress bar with a preset gradient fill into the DIV element you just created.

$('.progress-bar').gradientProgressBar({
  value: 0.75, // percentage
  size: 300, // width
  fill: { // gradient fill
      gradient: ["green", "yellow", "red"]
  }
});

4. All default options which can be used to customize the progress bars.

/**
 * This is the only required option. It should be from 0.0 to 1.0
 * @type {number}
 */
value: 0.0,

/**
 * Size of the progress bar in pixels
 * @type {number}
 */
size: 100.0,

/**
 * Width of the bar. By default it's auto-calculated as 1/14 of size, but you may set it explicitly in pixels
 * @type {number|string}
 */
thickness: 'auto',

/**
 * Fill of the bar. You may set it to:
 *   - solid color:
 *     - { color: '#3aeabb' }
 *     - { color: 'rgba(255, 255, 255, .3)' }
 *   - linear gradient (left to right):
 *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }
 *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }
 */
fill: {
    gradient: ['#3aeabb', '#fdd250']
},

/**
 * Color of the "empty" bar. Only a color fill supported by now
 * @type {string}
 */
emptyFill: 'rgba(0, 0, 0, .1)',

/**
 * Animation config (see jQuery animations: http://api.jquery.com/animate/)
 */
animation: {
    duration: 1200,
    easing: 'gradientProgressBarEasing'
},

/**
 * Default animation starts at 0.0 and ends at specified `value`. Let's call this direct animation.
 * Also you may specify any other value from 0.0 to 1.0
 * @type {number}
 */
animationStartValue: 0.0,

/**
 * Bar line cap ('butt', 'round' or 'square')
 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap
 * @type {string}
 */
lineCap: 'butt',

Change log:

2015-09-09

• Fixed calculation of the start point of the progress bar when the lineCap is round

---

This awesome jQuery plugin is developed by lgrassini. For more Advanced Usages, please check the demo page or visit the official website.