CSS Progress Wizard Example Page
- 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
Basic.
-
Step 1.
-
Step 2.
-
Step 3.
-
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