Components / Library Version 4.9.0

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.

PropertiesExamplesAPIAccessibilityNotes

* Required property

Properties of the wm-progress-monitor

breakpoint
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.
group-legend
string: csv
Property accepts two legend keys, in order of "complete,incomplete". See the Notes tab for more information regarding legends.
bar-labels-width
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 *
string
A description for the indicator. It is required for accessibility reasons.
completion-message
string
The text to display when the amount represents 100%.
show-legend
boolean
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.
subinfo
string
Optional text to display under the label.

Properties of the children elements wm-progress-slice

amount *
string
Numeric value (whole number)
legend *
string
Text for the legend.
popover-title
string
The popover title
popover-text
string
The popover text
popover-button-text
string
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.
wmProgressIndicatorButtonTriggered
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.