Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.
This version of the meter is always green and only shows the users’ completion of a tutorial or task at hand.
Meters can have a semantic fill that starts green, then turns orange (warning), and then red (critical) as the progress fills up to show, for example, that space is becoming limited.
Meters come in two different sizes: small and large. Use the large version when there is a single loading operation displayed prominently on the page. Use the small version when there are multiple loading operations happening at the same time in a more confined space, such as in a table or cards.
When the label is too long for the available horizontal space, it wraps to form another line. The value is always shown in full and never wraps or truncates.
A loader fills automatically as the system loads determinately or indeterminately. A user's actions do not affect the loader; it just indicates how long they must wait for the process to finish. A meter indicates how much the user has completed or how far they are in a continuum.
Use the built-in style for showing a label associated with the meter. This style always has a left aligned label and an optional right aligned value above the track. The label should be in sentence case. When a stack of meters appears in a table, the label can also be in the form of a table column header.
For RTL (right-to-left) languages, the layout of the meter is mirrored. The label is right-aligned, the value is left-aligned, and the fill progresses from right to left. Beware that the placement of the percent sign differs depending on the locale.
|Aug 22, 2019||5.1.0|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.