StepProgressBar [IN PROGRESS]

Progress bars are a bit limited when you want to display several steps on it (usually the bar starts at 0 and finishes at 100, so current value is in percents).

The aim of this plugin is to easily build fully customizable progress bar, that can handle more than one single step.

License

The plugin is under MIT License

Quickstart

Include jQuery and stepProgressBar css and js in your project: 


<link rel="stylesheet" type="text/css" href="path/to/stepProgressBar/jquery.stepProgressBar.css">
<script type="text/javascript" src="path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="path/to/stepProgressBar/jquery.stepProgressBar.js"></script>

Bar options

Name Type Default Description
currentValue number 0 Progress value we want to display on the bar
steps array [] The different progress steps (see "Step options" section)
rounded boolean true To switch between squared/rounded bar style
unit string '' The progress unit

Step options

Name Type Default Description
value number undefined Step value
topLabel html string undefined The label we want to display for that step above the bar
bottomLabel html string undefined The label we want to display for that step below the bar
mouseOver function function() {} (not implemented yet) A function executed on step mouseover
click function function() {} (not implemented yet) A function executed on step click

Methods

Method Description Usage
getCurrentValue Return number corresponding to current progress value
setCurrentValue Set the bar progress value with a number
findStep Find a step depending on its value
addStep Add a step
removeStepWithValue Remove a step depending on its value

Events

[not implemented yet]

Examples

Default

<div id=".step-progressbar-1"></div>
$('#.step-progressbar-1').stepProgressBar({
  currentValue: 110,
  steps: [
    { value: 10 },
    {
      topLabel: '50 custom unit',
      value: 50,
      bottomLabel: '<i class="material-icons">thumb_up</i>'
    },
    {
      value: 150,
      bottomLabel: '<i class="material-icons">card_giftcard</i>'
    },
    {  
      value: 200, 
      bottomLabel: '<i class="material-icons">star</i>',
      mouseOver: function() { alert('mouseOver'); },
      click: function() { alert('click'); }
    }
  ],
  unit: '€'
});

Test it:

get current value
set current value to 190
find step with value = 150 (see in console)
add step with value = 250
remove step with value = 50