COMPONENTS

Progress and meters

Native progress and meter elements already inherit the accent and available width. No component class is required.

Usage

Markup: progress, meter

Behaviour: Values and native indeterminate presentation are not calculated by CSS.

Use progress for task completion. A missing value means indeterminate progress; native animation and appearance follow the browser. Provide a label and visible completion text.
Use meter for a known measurement within a range, not loading. min, max, low, high and optimum describe its scale and meaningful thresholds. Native meter colours may reflect those thresholds rather than your accent.
Your application or server supplies values. CSS cannot calculate completion or update measurements. Progress and meter have no added glass material or custom animation.

Component API and styling module · Inherited appearance settings

Known completion

A native label names the progress indicator; visible text communicates its value.

Upload progress 65% 65% complete

<div class="form-group">
  <label for="upload-completion">Upload progress</label>
  <progress id="upload-completion" value="65" max="100">65%</progress>
  <small>65% complete</small>
</div>

Indeterminate progress

Omit value when completion is unknown. Keep a visible explanation while the browser renders its native indicator.

Preparing your files Working This may take a moment.

<div class="form-group">
  <label for="indexing-progress">Preparing your files</label>
  <progress id="indexing-progress">Working</progress>
  <small>This may take a moment.</small>
</div>

A measured range

Meter describes a bounded measurement. The browser uses its native threshold presentation.

Storage used 72% 72 GB of 100 GB used

<div class="form-group">
  <label for="storage-capacity">Storage used</label>
  <meter id="storage-capacity" min="0" max="100" low="50"
         high="85" optimum="20" value="72">72%</meter>
  <small>72 GB of 100 GB used</small>
</div>