|Views Total:||68,117 views|
|Official Page:||Go to website|
|Last Update:||May 6, 2017|
A pure css progress indicator that helps you create responsive, fully customizable step wizards or timelines in both directions.
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>
- Fix: First and last bubble extra line on
Thanks man, very easy to implement and works good.
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?
hi, thanks that’s beautiful and easy to use.
but as i use this with bootstrap it fails. what should i do!?
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.
How to display green line left of completed bubble but not right?
Hey man,, this one looks good ,works good. You saved my day… Thanks a ton
i need css of this problem