jQuery Plugin To Create Animated Gradient Progress Bars

jQuery Plugin To Create Animated Gradient Progress Bars
File Size: 7.87 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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.