Skip to content Skip to main menu Skip to utility menu

Add a progress bar to a page Task

You can add a progress bar or bar chart by inserting HTML code into pages.

The GovIntranet theme is built using the Twitter Bootstrap framework containing many ready-to-use HTML elements. To find out more, visit the Twitter Bootstrap pages.

You’ll need to insert code using the Text view. Here is an example:

<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%;">
<span class="sr-only">40% Complete (success)</span></div>
</div>

Using a combination of different styles you can build simple progress bars and more complex graphs:

60%
40% Complete (success)
45% Complete
20% Complete
60% Complete (warning)
80% Complete (danger)
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)