jQuery Plugin To Create Animated Gradient Progress Bars - Download jQuery Plugin To Create Animated Gradient Progress Bars

Download jQuery Plugin To Create Animated Gradient Progress Bars

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Animated Gradient Progress Bars, hope it will help you in programming stack.

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

Demo Download

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.

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

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

view source
1 <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.

view source
1 $('.progress-bar').gradientProgressBar({
2   value: 0.75, // percentage
3   size: 300, // width
4   fill: { // gradient fill
5       gradient: ["green", "yellow", "red"]
6   }
7 });

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

view source
01 /**
02  * This is the only required option. It should be from 0.0 to 1.0
03  * @type {number}
04  */
05 value: 0.0,
06  
07 /**
08  * Size of the progress bar in pixels
09  * @type {number}
10  */
11 size: 100.0,
12  
13 /**
14  * Width of the bar. By default it's auto-calculated as 1/14 of size, but you may set it explicitly in pixels
15  * @type {number|string}
16  */
17 thickness: 'auto',
18  
19 /**
20  * Fill of the bar. You may set it to:
21  *   - solid color:
22  *     - { color: '#3aeabb' }
23  *     - { color: 'rgba(255, 255, 255, .3)' }
24  *   - linear gradient (left to right):
25  *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }
26  *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }
27  */
28 fill: {
29     gradient: ['#3aeabb', '#fdd250']
30 },
31  
32 /**
33  * Color of the "empty" bar. Only a color fill supported by now
34  * @type {string}
35  */
36 emptyFill: 'rgba(0, 0, 0, .1)',
37  
38 /**
39  * <a href="https://www.jqueryscript.net/animation/">Animation</a> config (see jQuery animations: http://api.jquery.com/animate/)
40  */
41 animation: {
42     duration: 1200,
43     easing: 'gradientProgressBarEasing'
44 },
45  
46 /**
47  * Default animation starts at 0.0 and ends at specified value. Let's call this direct animation.
48  * Also you may specify any other value from 0.0 to 1.0
49  * @type {number}
50  */
51 animationStartValue: 0.0,
52  
53 /**
54  * Bar line cap ('butt', 'round' or 'square')
55  * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap
56  * @type {string}
57  */
58 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.

source : jqueryscript.net

Related posts: