Responsive Step Progress Indicator with Pure CSS

Category: CSS & CSS3 , Others | March 26, 2015
Views Total: 9,916
Official Page: Go to website
Last Update: March 26, 2015
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>

7 thoughts on “Responsive Step Progress Indicator with Pure CSS

  1. Michael Lloyd-Yates

    Hello, I would like to create a page that has a checklist, once the checklist is complete it shows a traffic light green light, and incomplete would show a red light, the red/green light would also be displayed on a summary page, any ideas?

  2. saleh

    hi, thanks that’s beautiful and easy to use.
    but as i use this with bootstrap it fails. what should i do!?

    1. saleh

      sorry, my bad. i’m using rtl bootstrap. i made some changes in your css code and now it’s working fine ;).
      thank you so much.

  3. Ankit Gupta

    How to display green line left of completed bubble but not right?


Leave a Reply