← All elements
<ol class="sw2"><li class="done">1</li><li class="done">2</li><li class="now">3</li><li>4</li></ol>About this navigation bar
Four numbered steps joined by a progress line, with completed steps turned green and a ring on the current one.
How it works
Each step is a circle in a list, joined by a connector line drawn with a pseudo-element. Classes mark completed and current steps, which switch the colours and add a double ring to the current one.
Ways to customise it
- Move the done and now classes to change progress.
- Add more steps.
- Change the green.
Good to know
An ordered list gives the steps a sequence. Add aria-current step to the current item for screen readers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.