A simple css based progress bar indicator helps user to identify the progress of order he/she placed on your site and these progress bar indicator help user to how many steps still need to pending for verification of any process, So if you want to add these types of step progress bar indicator in your website then in this post i am going to share awesome plugin name CSS Progress Wizard which helps you create responsive, fully customizable step progressbar or timelines in horizontally and vertically as per your project design.
Features:
- Pure CSS (lightweight, easy to implement)
- Flexbox – easy to update and add more items
- Resizeable/responsive (text-resize, etc… try it!)
- Easy to customize design (sass mixins/variables, etc…)
- Written with SASS
Integrate Responsive Step Progress Bar in Your Web App
Libraries
Include plugin css on page + font awesome library to use icons with progress bar.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/progress-wizard.min.css" rel="stylesheet">
HTML
Create very basic html progress step indicator bar with 5 steps from an Html unordered list. you only need to include progress-indicator class in ul element.
<ul class="progress-indicator">
<li class="completed">
<span class="bubble"></span>
Step 1. <br><small>(complete)</small>
</li>
<li class="completed">
<span class="bubble"></span>
Step 2. <br><small>(complete)</small>
</li>
<li class="active">
<span class="bubble"></span>
Step 3. <br><small>(active)</small>
</li>
<li>
<span class="bubble"></span>
Step 4.
</li>
<li>
<span class="bubble"></span>
Step 5.
</li>
</ul>
If you want to stack things up, you can use it for all kinds of things, like timelines. Just add .stacked to the container.
<ul class="progress-indicator stepped stacked">
<li class="completed warning">
<a href="#">
<span class="bubble"></span>
<span class="stacked-text">
<span class="fa fa-calendar"></span> June 3rd, 2014
<span class="subdued">/ Added a thing. <em>Pssst... I'm a link!</em></span>
</span>
</a>
</li>
<li class="completed">
<span class="bubble"></span>
<span class="stacked-text">
<span class="fa fa-calendar"></span> May 21st, 2014
<span class="subdued">/ Some stuff happened. It was amazing.</span>
</span>
</li>
<li>
<span class="bubble"></span>
<span class="stacked-text">
<span class="fa fa-calendar"></span> April 11th, 2014
<span class="subdued">/ What a wild day!</span>
</span>
</li>
<li>
<span class="bubble"></span>
<span class="stacked-text">
<span class="fa fa-calendar"></span> February 3rd, 2014
<span class="subdued">/ This day is toooo long.</span>
</span>
</li>
<li>
<span class="bubble"></span>
<span class="stacked-text">
<span class="fa fa-comment"></span> January 5th, 2014
<span class="subdued">/ Happy birthday, me!</span>
</span>
</li>
</ul>
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
