Progress Bar

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.

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