Meter Example

The following example of a CPU meter demonstrates the meter 설계 패턴.

Example

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

Central Processing Unit (CPU) Usage

키보드 지원

Not applicable.

Role, Property, State, Tabindex 어트리뷰트

역할(role)	어트리뷰트	엘리먼트	사용법
`meter`		`div`	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와 CSS 소스 코드

CSS: meter.css
Javascript: meter.js

HTML Source Code

<p>
  The value of this meter changes every 5 seconds. Use the pause button to stop changes.
</p>
<h3 id="cpu_usage_label">
  Central Processing Unit (CPU) Usage
</h3>
<p>
  <button type="button" class="play-meters">
    Pause Updates
  </button>
</p>
<div role="meter"
     aria-valuenow="90"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-labelledby="cpu_usage_label">
  <svg width="100"
       height="100"
       class="fill"
       aria-hidden="true"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="0"
          y="0"
          width="100%"
          height="100%"
          fill="currentcolor"></rect>
  </svg>
</div>