Meter Example

About This Example

The following example of a CPU meter demonstrates the Meter Pattern.

Example

The value of this meter changes every 5 seconds. Use the pause button to stop changes.

Central Processing Unit (CPU) Usage

Pause Updates

Keyboard Support

Not applicable.

Role, Property, State, and Tabindex Attributes

• Identifies the element as a meter.

| | | aria-valuemin="NUMBER" | div | Specifies the minimum value the meter can have. | | | aria-valuemax="NUMBER" | div | Specifies the maximum value the meter can have. | | | aria-valuenow="NUMBER" | div | Specifies the current value of the meter. | | | aria-labelledby | div | Identifies the element that provides the accessible name of the meter. |

JavaScript and CSS Source Code

• CSS: meter.css
• JavaScript: meter.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.