Dynamic Multi-step Progress Bar In jQuery - easy-progress

easy-progress is a really small jQuery plugin that dynamically renders a multi-step progress bar with number and counter on the webpage.

The plugin smoothly fills the progress bar to indicate where your users are in their process.

See also:

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

How to use it:

1. Insert both jQuery library and the easy-progress plugin's script into the document.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<script src="progress.plugin.js"></script>

2. Initialize the plugin and specify the bar width & number of steps.

$.progress({

  // default: 3
  step: 5, 

  // default: 300
  line_w: 500

});

3. This will generate a stepped progress bar on the webpage as these:

<div class="warp">
  <div class="line" style="width: 500px;"></div>
  <p class="step"></p>
  <button class="next">Next</button>
  <button class="prev">Prev</button>
  <span class="flag" style="left: -10px;">1</span>
  <span class="flag" style="left: 240px;">2</span>
  <span class="flag" style="left: 490px;">3</span>
</div>

4. The necessary CSS for the stepped progress bar. Modify & override the CSS rules and insert them into your document.

/* wrapper */
.warp {
  position: relative;
  margin: 50px 100px;
}

/* progress bar */
.line {
  width: 500px;
  height: 5px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}

/* step */
.step {
  width: 0px;
  height: 5px;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}

/* count */
.flag {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid red;
  position: absolute;
  top: -8px;
  background: #fff;
  z-index: 10;
}

/* next/prev buttons */
.next {
  margin-top: 30px;
}

.prev {
  margin-top: 30px;
}

---

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