Responsive Step Progress Indicator with Pure CSS

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

    Cool thanks.

  • Thanks man, very easy to implement and works good.

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

  • Jorge Interno

    Thanks man!

  • saleh

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

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

  • Ankit Gupta

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