Adobe Logo

Spectrum

Version 5.1.0

Meter

Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.

A meter, label Storage warning 80%.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a standard meter, including its value, fill, track, and label.

Options#

Key example of three standard meters showing varied levels of completion of steps. First meter label Tutorials completed, 1 of 4. Second meter label Tutorials completed, 3 of 4. Third meter label Tutorials completed, 4 of 4.

Standard#

This version of the meter is always green and only shows the users’ completion of a tutorial or task at hand.

Key example of three meters showing varied semantic colors. First meter label storage space, 26% standard green. Second meter label storage space, 80% warning orange. Third meter label storage space, 90% critical red.

Semantic colors#

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.

Key example of two meters showing varied size. First meter, small size, label Tutorials completed, 1 of 4. Second meter, large size, label Tutorials completed, 1 of 4.

Size#

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.

Behaviors#

Key example of a meter showing text overflow. Meter label Tutorials abgeschlossen, 1 of 4. New line created for second word abgeschlossen.

Text overflow#

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.

Usage guidelines#

Loader or meter?#

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.

Key example showing correct usage of meter. A bar loader and meter. Bar loader label Loading data, 80%. Meter label Tasks completed, 1 of 5.

Labels#

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.

Key example showing correct usage of meter. Meter label Tasks completed, 1 of 5.

Internationalization#

Key example of meter internationalization for right-to-left languages. Layout of meter is mirrored, label in Arabic Storage space 26%.

RTL#

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.

Changelog#

DateNumberNotes
Aug 22, 20195.1.0
  • Added text overflow behavior
Apr 19, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#

N/A

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

N/A

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.