Progress Monitor

The Progress Monitor component provides layout for one or several Progress Indicators, and controls the form in which they are represented (bar or doughnut). Progress Indicators are used to visualize progress within a single category via two contrasting measures, e.g. "completed" and "not completed".

The Progress Monitor determines what form to represent the indicators by way of a breakpoint based on the Monitor's width. Above the breakpoint, Indicators are shown as doughnuts in a horizontal layout; under the breakpoint they are shown as bars in a vertical layout. By default, the Monitor's breakpoint is the sum of the widths of its Indicators (as doughnuts). It can be overridden via the breakpoint property.


* Required property

Properties of the wm-progress-monitor

number | string
The breakpoint that determines the transition between doughnut and bar layouts. Can be a unit-less number representing the minimum number of Indicators to show side-by-side, or an exact pixel value. For example 3 or "900px". Defaults to the sum of the widths of the Indicators, meaning the component will try to fit them all on one row, and will switch to bar form whenever that is not possible.
string: csv
Property accepts two legend keys, in order of "complete,incomplete". See the Notes tab for more information regarding legends.
string: CSS width value
The width of children wm-indicator labels when in the bar layout. Defaults to 12rem.

Properties of the wm-progress-indicator

label *
A description for the indicator. It is required for accessibility reasons.
The text to display when the amount represents 100%.
Show or hide the legend. The legend is still read by screen readers, and for that reason the legend property on the wm-progress-slice elements is still required.
Optional text to display under the label.

Properties of the children elements wm-progress-slice

amount *
Numeric value (whole number)
legend *
Text for the legend.
The popover title
The popover text
The text inside the popover button. If not provided, the button is not rendered.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.

Emitted by wm-progress-indicator when one of its popover buttons has been triggered. The event's detail property contains the wm-progress-slice element that has been triggered. See javascript sample in the examples tab for usage.

Screen Reader

Screen readers announce the following when the user tabs onto a Progress Indicator: "Interactive chart. Use arrow keys to browse elements, press Tab to exit."

Keyboard Support

Key Function
Arrow Down Arrow Right
  • If the indicator is in focus, brings focus to the first segment and opens the popover.
  • If a segment is in focus, brings focus to the next segment.
Arrow Up Arrow Left
  • If the indicator is in focus, brings focus to the last segment and opens the popover.
  • If a segment is in focus, brings focus to the previous segment.
Tab Exits the indicator (bringing focus to the next focusable element).
Shift + Tab Exits the indicator (bringing focus to the previous focusable element).
Enter Triggers the popover button (if popover is open and has a button).

When the wm-progress-indicators are displayed as doughnuts, they each have their own legend set by the legend properties of their children wm-progress-slices. When they collapse into bars, only one legend is displayed for all the indicators. That global legend is set via the group-legend property on wm-progress-monitor. Please be aware, these legend keys cannot contain commas.