Responsive Step Progress Indicator with Pure CSS

Category: CSS & CSS3 | May 6, 2017
Author: christabor
Views Total: 14,782
Official Page: Go to website
Last Update: May 6, 2017
License: MIT

Preview:

Responsive Step Progress Indicator with Pure CSS

Description:

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>
</ul>

Changelog:

05/06/2017

  • Fix: First and last bubble extra line on

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

    Reply
  2. saleh

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

    Reply
    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.

      Reply
  3. Ankit Gupta

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

    Reply
  4. shiju shaji

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

    Reply

Leave a Reply