UI Component Lab 日本語

← All components

Data display

Meter

A bar that shows a measurement within a known range, such as storage used or battery level.

40%

40GB of 100 GB

Also known as

How to recognize it

A horizontal bar filled to the current value. The color can change, for example to yellow or red, when the value is in a bad range.

Behavior

  • It is not interactive; it only shows a value.
  • This demo uses the native <meter> with low, high and optimum, so the browser colors the bar by range. Use the buttons to change the value.

Keyboard

KeyAction
—None. The demo’s buttons use Tab and Enter / Space.

Usage notes

  • Do not use a meter for the progress of a task. Use a progress bar for that.
  • The maximum must mean something, like the size of the disk. Show the number as text too, since color alone does not tell everyone the state.
  • Progress bar: A meter shows a measurement within a range; a progress bar shows how far a task has gone.

Sources