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.

Properties Examples Events Accessibility Notes

* 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.

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.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.