I’m working on a checkout process for an app at the moment, and decided to try throwing together a progress bar for it. I had two goals:
- I wanted to be able to advance the progress bar solely by adding or taking away classes
- I wanted the HTML it corresponded to to be as simple as possible
- I wanted it to be responsive
- I wanted the progress “nodes” to be circular
- I wanted it to handle transparent background colors well
Okay, that’s five goals. I had two goals when I started. Things happened.
The combination of transparency-friendliness and circular progress nodes was the trickiest part. Circular nodes and rectangular bars don’t overlap cleanly, and overlapping transparent elements tend to look weird (anywhere two similar-colored 50% opaque elements overlap will end up looking like one 75% opaque element). Either sticking to solid colors or dropping the round nodes requirement would’ve made this part easier, but I like the solution that came out of the restrictions. It works pretty well, all things considered.
The html that’s required is as simple as an unordered list element with a “progress” class, and some list item elements with a class of “complete” for items that have been completed, and “active” for the the item the user is currently on.
Here’s the CodePen: http://codepen.io/neurodynamic/pen/EVgvoE