Responsive Step Progress Indicator with Pure CSS

Author: christabor
Views Total: 67,043 views
Official Page: Go to website
Last Update: May 6, 2017
License: MIT


Responsive Step Progress Indicator with Pure CSS


A pure css progress indicator that helps you create responsive, fully customizable step wizards or timelines in both directions.

Basic usage:

Load the progress-wizard.min.css in the document’s head section.

<link href="css/progress-wizard.min.css" rel="stylesheet">

Generate a basic progress indicator with 5 steps from an Html unordered list.

<ul class="progress-indicator">
  <li class="completed"> <span class="bubble"></span> Step 1. </li>
  <li class="completed"> <span class="bubble"></span> Step 2. </li>
  <li> <span class="bubble"></span> Step 3. </li>
  <li> <span class="bubble"></span> Step 4. </li>
  <li> <span class="bubble"></span> Step 5. </li>



  • Fix: First and last bubble extra line on

See also  No Script Modal Window | CSS Script

Leave a Reply

Your email address will not be published. Required fields are marked *