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
* Required property
Properties of the
number | string
"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.
Properties of the
wm-progress-sliceelements is still required.
Properties of the children elements
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
wm-progress-indicatorwhen one of its popover buttons has been triggered. The event's
detailproperty contains the
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."
|Arrow Down Arrow Right||
|Arrow Up Arrow Left||
|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).|
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.