Canvas Based Step Progress Bar With jQuery - Stepbar

Stepbar is a tiny jQuery plugin that lets you render a horizontal, dynamic progress indicator with custom steps. Useful in step-by-step sign-up form wizard.

See also:

• Responsive jQuery Progress Bar With Steps - Progressbar.js
• Responsive Step Progress Indicator with Pure CSS

How to use it:

1. To use this plugin, include the JavaScript stepbar.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="stepbar.js"></script>

2. Create an element in which you want to render the step progress indicator.

<div class="demo">
  ...
</div>

3. Initialize the plugin and speficy an array of steps for the progress indicator.

$(document).ready(function() {
  $('#demo').stepbar({
    items: ['Item1', 'Item2', 'Item3', 'Item 4', 'Item 5', 'Item 6']
  });
});

4. Customize the styles of the step progress indicator.

$(document).ready(function() {
  $('#demo').stepbar({
    items: ['Item1', 'Item2', 'Item3', 'Item 4', 'Item 5', 'Item 6'],
    color: '#ccc',
    fontColor: '#000',
    selectedColor: '#0000FF',
    selectedFontColor: '#fff'
  });
});

5. Set the current step.

$(document).ready(function() {
  $('#demo').stepbar({
    items: ['Item1', 'Item2', 'Item3', 'Item 4', 'Item 5', 'Item 6'],
    current: 5
  });
});

---

This awesome jQuery plugin is developed by erickzanardo. For more Advanced Usages, please check the demo page or visit the official website.