Meter pattern
"A meter is a graphical display of a numeric value that varies within a defined range. For example, a meter could be used to depict a device's current battery percentage or a car's fuel level.
Note: a meter should not be used to represent a value like the current world population since it does not have a meaningful maximum limit. The meter should not be used to indicate progress, such as loading or percent completion of a task. To communicate progress, use the instead."
Progress
50 of 100
Progress
50 of 100
Progress
50 of 100
Progress Circle
50%
50%
50%
50%
50%
Accessibility Requirements
- The meter has a label, either visible or for screen readers.
- The meter element has
role="meter". - The meter has
aria-valuenowset. - The meter has
aria-valueminset. - The meter has
aria-valuemaxset.