Feedback

User feedback is a critical part of the user experience. Proper usage depends on the activity and the situation.

Feedback indicators inform users about the status of ongoing processes, such as loading an app, completing or submitting a form, or saving updates.

Progress: displays an indicator showing the completion progress of a task.
Meter: represents a value within a known range.

Progress

Progress indicators express an unspecified wait time or display the length of a process. They may be linear or circular. They may also be determinate or indeterminate:

Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected.
Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

Determinate indicator 70%

html

<label class="progress" for="progress">Determinate indicator
  <progress id="progress" max=100 value=70 aria-valuenow=70 aria-valuemin=0 aria-valuemax=100></progress>
  <span style="width: 70%;">70%</span>
</label>

Indeterminate indicator

html

<label class="progress" for="indeterminate">Indeterminate indicator
  <progress id="indeterminate" max=100 value=0 aria-valuenow=0 aria-valuemin=0 aria-valuemax=100></progress>
  <span class="indicator"></span>
</label>

Loading indicator

html

<label class="progress" for="loading">Loading indicator
  <progress id="loading" max=100 value=0 aria-valuenow=0 aria-valuemin=0 aria-valuemax=100></progress>
</label>

Meter

A meter defines a measurement within a known range or a fractional value. A meter could also be called a gauge. Note that <meter> should not be used to indicate progress.

For more information on <meter>, see the MDN web docs.

Powerwall Charge 80 Watts

html

<label class="meter" for="powerwall">Powerwall Charge
  <meter id="powerwall" value=80 min=0 low=20 high=90 max=100 optimum=80 title="Watts">80 Watts</meter>
</label>