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.
> > > > > > |
-
Step 1.
(complete) -
Step 2.
(complete) -
Step 3.
(active) -
Step 4. -
Step 5.
If you want to stack things up, you can use it for all kinds of things, like timelines. Just add .stacked to the container.
See live demo and download source code.
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.
