Online shopping is a very common thing to do nowadays. We all must have tried our hands on it some time. It does save our money, and of course, a lot of time.
Whenever we shop a product, we are made to go through various steps before we finally order the product. The steps would be : Choosing the product, Login/Signup, Address, and choosing the mode of payment. The different steps may vary site to site. These are called WIZARD.
A wizard shows us our progress as we proceed one step to next. Creating such a wizard is easy.
For this, we take a div and with the pseudo property before, we add horizontal lines to connect these steps. In another div with <ul> <li>, an icon is mentioned for each different step. This completes our wizard. Now, to show the progress . we will show our current progress/step and will show the past completed steps with a different color and the remaining steps with a different one.
We will use the pseudo property ::before and create the horizontal line and the essential property used here is position: absolute. set the position and width of the horizontal line . Use the <ul> <li> property and set the width to 20% and display : inline (display horizontally). Inside the <li>, use the <span> tag to define the identity of every steps’ wizard.