Responsive Step Progress Bar in Pure CSS – CSS Progress Wizard

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.

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.

            

                
                    
                    
                         June 3rd, 2014
                        / Added a thing. Pssst... I'm a link!
                    
                
            
            

                
                
                     May 21st, 2014
                    / Some stuff happened. It was amazing.
                
            
            

                
                
                     April 11th, 2014
                    / What a wild day!
                
            
            

                
                
                     February 3rd, 2014
                    / This day is toooo long.
                
            
            

                
                
                     January 5th, 2014
                    / Happy birthday, me!
                
            
        

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.