jquery-gradient-progress-bar

jQuery Plugin for drawing animated progress bars with gradient fill.

Based on the amazing work of Rostyslav Bryzgunov: jquery-circle-progress https://github.com/kottenator/jquery-circle-progress.

Install

Download latest GitHub release or bower install jquery-gradient-progress-bar

Usage

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="dist/gradient-progress-bar.min.js"></script>  <div class="progress-bar"></div>  <script type="text/javascript">    $('.progress-bar').gradientProgressBar({       value: 0.75,       size: 300,       fill: {           gradient: ["green", "yellow", "red"]       }   }); </script>

Options

You should specify options like in usage example above.

| Option | Description | | ---- | ---- | ---- | | value | This is the only required option. It should be from 0.0 to 1.0
Default: 0 | | size | Size of the progress bar / canvas in pixels
Default: 100 | | thickness | Width of the bar. By default it's automatically calculated as 1/14 of size but you may set your own number
Default: "auto" | | lineCap | Bar line cap: "butt", "round" or "square" - read more
Default: "butt" | fill | The bar fill config. You may specify next:
- { color: "#ff1e41" }
- { color: 'rgba(255, 255, 255, .3)' }
- { gradient: ["red", "green", "blue"] }
- { gradient: [["red", .2], ["green", .3], ["blue", .8]] }
- { gradient: [ ... ], gradientAngle: Math.PI / 4 }
- { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
Default: { gradient: ["#3aeabb", "#fdd250"] } | | emptyFill | Color of the "empty" bar. Only a color fill supported by now
Default: "rgba(0, 0, 0, .1)" | | animation | Animation config. See jQuery animations.
You may also set it to false
Default: { duration: 1200, easing: "gradientProgressBarEasing" }
"gradientProgressBarEasing" is just a ease-in-out-cubic easing | | animationStartValue | 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
Default: 0.0

Events

When animation is enabled, there are 3 events available: