7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight step indicators for checkouts, onboarding and order tracking: a numbered horizontal stepper, a vertical checklist, a progress line with dots, a working multi-step form, an icon tracker, compact dots, clickable steps and a numbered How it works section.
A numbered stepper across the top of a checkout: completed steps show a tick, the current step is filled and labelled with aria-current="step", and upcoming steps are outlined. The connecting lines are pseudo-elements, so the list stays simple.
A vertical stepper for onboarding checklists, with a title and a short description for each step joined by a line down the left. The current step's description is brighter, and finished steps show a tick both visually and in hidden text.
View code
<ol class="stv">
<li class="done"><b>Create your shop<span class="sr"> (done)</span></b><p>Name, logo and currency.</p></li>
<li class="done"><b>Add a product<span class="sr"> (done)</span></b><p>Photos, price and stock.</p></li>
<li aria-current="step"><b>Connect payments</b><p>Link a payout account to get paid.</p></li>
<li><b>Go live</b><p>Choose a domain and publish.</p></li>
</ol>
Dots on a single progress line that fills up to the current step, with labels underneath. The fill is one gradient-free bar whose width comes from a custom property, so changing --p moves the progress without touching the markup.
A three-step sign-up form where the stepper at the top updates as you move between steps with Back and Next. Each step is a fieldset with a legend, the progress text is a live region, and focus moves to the new step's first field.
An order tracking timeline with an icon for each stage: ordered, packed, shipped and delivered. The reached stages are coloured, each stage has a date underneath, and the current stage is announced with aria-current and plain text.
A small stepper for tight spaces like mobile sheets: a row of dots where the current one stretches into a pill, plus Step 2 of 5 in text. The stretch animates with width, and the text carries the information for screen readers.
A stepper where completed steps are links back to earlier pages, the current step is plain text and future steps are disabled. It is a nav landmark with an ordered list, which is the right structure when steps are separate pages.
A How it works section with big outlined numbers and a short explanation for each step, arranged in a responsive grid. It is an ordered list, so the numbering is meaningful to assistive technology as well as visible.
View code
<ol class="stn">
<li><h3>Pick a template</h3><p>Start from a layout built for your kind of shop.</p></li>
<li><h3>Add your products</h3><p>Upload photos and set prices in minutes.</p></li>
<li><h3>Start selling</h3><p>Share your link and take your first order.</p></li>
</ol>
Steppers are ordered lists. Mark the current step with aria-current="step" and write finished steps as done in text, not only with a tick, so screen readers can tell where the person is.
Lines between steps
The connecting lines are pseudo-elements on each item after the first, positioned behind the step circles. Colouring the line from completed steps shows progress without extra elements.
Say Step 3 of 5
Compact designs such as dots should always include text like Step 2 of 5. Dots alone carry no meaning for assistive technology or for people who cannot tell the colours apart.
Steps as pages
When each step is its own page, make completed steps links so people can go back, keep the current one as text, and leave future steps unlinked until they are reachable.
Frequently asked questions
Do steppers need JavaScript?
Only the multi-step form, to move between steps. The rest are HTML and CSS.
Should future steps be clickable?
Usually not, because the earlier information is needed first. Let people go back, not skip ahead.
How many steps are too many?
Keep checkouts to three to five steps; long forms are easier when grouped into a few clear stages.