Download Page | Home Page


(CSS) Progress Wizard
A pure css node/vertex thing!

Usage.

Just add .progress-indicator to any ul or ol. Add bubbles by embedding a <span class="bubble"> in your <li>. See below for an example:

Examples

Basic.

Moderate

Toss in some Font Awesome icons to mix things up.

Complex

States


Other uses!

If you want to stack things up, you can use it for all kinds of things, like timelines. Just add .stacked to the container.

Note: in order to keep text looking good, add the <span class="stacked-text">Text Label</span> to all of your text blocks in each node, which can be styled however you like.

How about a speaker timeline?

No centering in the container

To disable centering and margins that auto-center the timeline, just add .nocenter To the ul/ol. Note: depending on your icons and text, you may want to massage the alignment for your content.