Animated Step Progress Indicator With jQuery - StepProgressBar

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:

• Beautiful Goal Progress Slider Plugin With jQuery - Goal Slider

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.