(CSS) Progress Wizard
A pure css node/vertex thing!
- Pure CSS (lightweight, easy to implement)
- Flexbox - easy to update and add more items
- Resizeable/responsive (text-resize, etc... try it!)
- Easy to customize design (sass mixins/variables, etc...)
- Written with SASS
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.
-
Step 1.
(complete)
-
Step 2.
(complete)
-
Step 3.
(active)
-
Step 4.
-
Step 5.
-
Step 1.
-
Step 2.
-
Step 3.
-
Step 4.
-
Step 5.
Moderate
Toss in some Font Awesome icons to mix things up.
-
Step 1.
-
Step 2.
-
Step 3.
-
Step 4.
-
Step 5.
-
Step 1.
-
Step 2.
-
Step 3.
-
Step 4.
-
Step 5.
Complex
-
Step 1.
-
Step 2.
-
Step 3.
-
Step 4.
-
Step 5.
States
-
Add some steps
-
Add some more...
-
????
-
PROFIT!!
-
Do a barrel roll
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?
-
2:45 - 3:30
Some really cool title
By a special speaker
- Intro to stuff
- Stuff
- Advanced Stuff
-
1:30 - 2:30
Some really cool title
By a special speaker
-
12:45 - 1:30
Some really cool title
By a special speaker
-
12:00 - 12:30
Some really cool title
By a special speaker
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.