I'm building web UI for a "wizard" workflow with 4 sequential steps-- users proceed in order from Step 1 through Step 4. I'd like to include a progress indicator showing the user where in the workflow they are.
For each step, I'd like to show:
- a short name of each step (e.g. "choose effective date")
- the step number
- an indication of which step is selected
Given the shape of the forms and surrounding chrome, I'd prefer a horizontal progress bar rather than a vertical one.
I'm looking for a gallery of examples of this kind of "step progress indicator" in an HTML wizard. Anyone know of such a gallery? If not, do you know good examples from other websites that I can draw inspiration from?
Extra credit for ideas that can be implemented using CSS alone without requiring any new images on my site.
Here's a few I found so far, although I'm looking for something a little more "designed".