Progress and Status Indicators

4 min read

Canvas includes a small set of legacy UI components that can be used to show progress, status, or key information. These patterns rely on older Canvas JavaScript enhancements (for example, pill and ui-progressbar) rather than modern HTML elements such as <progress>. They are supported within course content but may not behave consistently across all browsers.

Where possible, this page also shows inline-style alternatives that do not depend on Canvas' legacy classes and are closer to modern accessibility practice.

Useful references

Pill-style status indicators (Canvas class)

The pill class is a legacy Canvas pattern that creates a horizontal list of compact status indicators. This is useful for presenting summary information about an activity, such as its weighting, rules, or points.

Example assignment settings:

  • 30% of module mark
  • 2 late submission rules
  • 10 points total
<p>Example assignment settings:</p>
<ul class="pill">
  <li>30% of module mark</li>
  <li>2 late submission rules</li>
  <li>10 points total</li>
</ul>

The pill pattern is purely presentational. Screen readers will announce it as a normal list, so avoid using colour or position alone to convey meaning. Make sure the text inside each pill is self-explanatory.

Inline-only alternative: pill-style labels

If you prefer not to rely on the legacy pill class, you can create a similar effect using inline styles. This works in any context that allows inline CSS.

Example assignment settings:

30% of module mark2 late submission rules10 points total

<p>Example assignment settings:</p>
<p>
  <span style="display: inline-block; margin: 0 0.25rem 0.25rem 0; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eef4ff; color: #111322; font-size: 0.85rem;">
    30% of module mark
  </span>
  <span style="display: inline-block; margin: 0 0.25rem 0.25rem 0; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eef4ff; color: #111322; font-size: 0.85rem;">
    2 late submission rules
  </span>
  <span style="display: inline-block; margin: 0 0.25rem 0.25rem 0; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eef4ff; color: #111322; font-size: 0.85rem;">
    10 points total
  </span>
</p>

Progress bar (Canvas legacy pattern)

Canvas includes a legacy progress bar built using <div> elements and enhanced by JavaScript. This displays a visual bar but does not behave like the semantic HTML <progress> element.

Example: module completion status

Module progress: 50% complete

<p>Example: module completion status</p>
<div id="progressbar"
  class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  aria-valuetext="50% complete"
  style="width: 100%; height: 24px;">
  <div class="ui-progressbar-value ui-widget-header ui-corner-left"
    style="width: 50%; background-color: #0000cd;">
  </div>
</div>
<p>
  <span class="screenreader-only">Module progress: </span>
  <strong>50% complete</strong>
</p>

If you change the progress value, remember to update aria-valuenow, aria-valuetext, and the inner bar's width so they all stay in sync (for example, 75% would use aria-valuenow="75", aria-valuetext="75% complete", and style="width: 75%;").

Inline-only alternative: semantic progressbar

You can create a simple, accessible progress indicator using only inline styles and ARIA attributes, without relying on Canvas' ui-progressbar classes. This will not animate automatically, but it is predictable and works wherever inline CSS is allowed.

Reading progress:

40% complete — 4 of 10 sections read.

<p id="inline-progress-label">Reading progress:</p>
<div role="progressbar"
  aria-labelledby="inline-progress-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="40"
  aria-valuetext="40% complete"
  style="width: 100%; height: 1.25rem; border-radius: 999px; border: 1px solid #d0d4dd; background: #f5f7fb; overflow: hidden;">
  <div style="width: 40%; height: 100%; background: linear-gradient(90deg, #0000cd, #4c9dcd);"></div>
</div>
<p style="margin-top: 0.5rem">
  <strong>40% complete</strong> — 4 of 10 sections read.
</p>

Modern HTML reference (outside Canvas)

In modern HTML, progress is usually represented with the semantic <progress> element. However, in this Canvas instance the <progress> element is stripped out of Rich Content Editor HTML, so it is shown here only as a reference for web development outside Canvas.

<!-- Example of semantic HTML, not supported in Canvas content -->
<label for="module-progress">Module completion:</label>
<progress id="module-progress" value="0.5" max="1">50%</progress>

Accessibility notes

Because these indicators are based on legacy Canvas patterns:

  • Behaviours may vary across browsers and devices, especially for assistive technologies.
  • The legacy progress bar does not automatically announce changes to screen readers; static values must be updated manually.
  • Colour should never be the only way of communicating meaning or status. Always include a text description of the current value (for example, "40% complete — 4 of 10 sections read").
  • Inline-only patterns that use role="progressbar", aria-valuenow, and visible text are often more robust and predictable than JavaScript-enhanced widgets.