First time using this progress bar?

Make sure to read the Info & Notes section so you know how it works.

Jump to Info & Notes

PROGRESS BAR: HTML EDITOR

The progress bar is available below. It must be copied and pasted in the HTML Editor. There is no Visual Editor option for the progress bar.

To use the progress bar, do the following:

Manually calculate the percent you want for your progress bar.
In the Codepen embed, change the 50% value to the percent you calculated in three places — aria-valuenow="50" (do not use % sign here), width: 50% (use % sign here), and 50% (use % sign here).
Select the entire contents of the Codepen embed.
Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
Locate where you want the item to appear using the Find bar.
Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
Click the “Save” button in the bottom-right corner.

50%

PROGRESS BAR: INFO & NOTES

Progress bars provide a visual representation of a learner’s progress, encouraging them to continue their hard work.

Ways you can use progress bars in Canvas…

Show progress through a sequential module.
Display how many steps of a multi-part assignment students have completed.
Include a visual representation of the overall course progress on the home page.

Notes

You will need to manually calculate the appropriate percent for progress.
Do not use a progress bar if the progress is 0%. The smallest value that will display well is 5%.
We recommend including a heading or other text above the progress bar indicating what the progress bar represents.

This progress bar is static, meaning that you will manually set it to a particular amount. This means that you should not use it to communicate progress if students have the ability to skip around. For example, if you are showing module progress, only use this on modules that are set to sequential order through Module Requirements.

Back to Top