Animated Step Progress Indicator With jQuery - StepProgressBar
File Size: | 13.9 KB |
---|---|
Views Total: | 12876 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

StepProgressBar is a lightweight jQuery plugin for rendering an animated, responsive, flexible progress bar with multiple steps on the webpage. Ideal for creating a goal progress bar to show the progress of your campaign.
See also:
How to use it:
1. The plugin requires the jquery.stepProgressBar.css
to provide the primary CSS styles for the progress bar.
<link href="src/jquery.stepProgressBar.css" rel="stylesheet">
2. The html.
<div id="myGoal"></div>
3. Put jQuery library and the jQuery StepProgressBar plugin at the end of the html document.
<script src="//code.jquery.com/jquery-1.12.2.min.js"></script> <script src="src/jquery.stepProgressBar.js"></script>
4. Render a progress bar with custom steps inside the container you just created.
$('#myGoal').stepProgressBar({ currentValue: 200, steps: [ { value: 100 }, { topLabel: '500 custom unit', value: 500, bottomLabel: '<i class="material-icons">thumb_up</i>' }, { value: 800, bottomLabel: '<i class="material-icons">card_giftcard</i>' }, { value: 1000, bottomLabel: '<i class="material-icons">star</i>', mouseOver: function() { alert('mouseOver'); }, click: function() { alert('click'); } } ], unit: '$' });
4. All available options with default values.
/* current progress value (does not have to be in percent) */ currentValue : 0, /* all progression steps */ steps : [], /* to switch between classic/rounded bar */ rounded : true, /* values unit */ unit : '', /* bound value below which the progressbar has to be adapted */ responsiveLimit : 480, /* in order to customize label that will be displayed on progress bar. */ progressLabel : function(currentValue, maxValue, minValue, percentValue) { return (percentValue + '%'); }, /* if we want to fill progress bar with animated gradient for ex. */ progressFill : undefined
5. API methods.
// get the current progress value $('#myGoal').stepProgressBar('getCurrentValue') // set the bar progress value with a number $('#myGoal').stepProgressBar('setCurrentValue', 500) // find a step depending on its value $('#myGoal').stepProgressBar('findStep', 500) // add a step $('#myGoal').stepProgressBar('addStep', {value: 250}); // remove a step $('#myGoal').stepProgressBar('removeStep', 500)
This awesome jQuery plugin is developed by mickaelr. For more Advanced Usages, please check the demo page or visit the official website.