Using wizard steps can be tedious but can result in a rewarding user experience. You have a couple of approaches you can follow:
Personally, I prefer the first scenario.
Looking at the step container
And then the individual step containers
The important thing with the step containers is the classes assigned to them. There are 3 classes:
The class ‘wizard-step’ is required for all the step containers of your wizard step, to render a similar UI. The combination of ‘wizard-step wizard-step-visited’ (as shown above) is used to indicate the steps already visited. The combination of ‘wizard-step wizard-step-active’ is used to indicate the step you are currently on.
Depending on you need (and assuming you are following the multipage approach), you can also set-up the step containers to navigate to that step’s page. If you require to commit your progress when continuing, you can invoke either a Microflow or a Nanoflow of your choice (just remember to add the show page activity in your flow!). Also remember to close your current page when navigating to a new step wizard page, as it will result in a couple of open pages which will make for a poor user experience.
Lastly, the buttons on the bottom of the page can be configured just as the step containers mentioned above.
Hope it helps!
You can find a good example in the following Learning Path:
Specifically this section.