Checkout Progress Breadcrumbs


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.

a progress bar with steps 'step 1', 'step 2', '...', 'profit', and 'confront troubling realities about the amorality of capitalism'

Here’s the CodePen: