Responsive Step Progress Indicator with Pure CSS

Category: CSS & CSS3 | May 6, 2017
Views Total:69,698 views
Official Page:Go to website
Last Update:May 6, 2017


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

You Might Be Interested In:

9 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?

  4. shiju shaji

    Hey man,, this one looks good ,works good. You saved my day… Thanks a ton


Leave a Reply