Progress Bars

Provide up-to-date feedback on the progress of an action with simple, modern progress bars... Or, just use them like all the cool kids do these days on their resumes and freelance websites.

Web Design 25%
25% Complete
Graphic Design 50%
50% Complete
Print Design 75%
75% Complete

There are a few things to note about the markup below.

  1. First notice that we've added class heading-sm to the .progress-label element to give it that consistent small heading font styling (see Smaller Headings).
  2. Next, take note that you must add a color class to the .progress-bar element.
  3. And lastly, make sure to also give your .progress-bar element an inline style width percentage like style="width: 50%".
Web Design 25%
25% Complete

And if you just want a stand-alone progress bar with no fancy labels or anything, feel free to use the .progress element where you want.

25% Complete
50% Complete
75% Complete
25% Complete