UI Component Lab 日本語

← All components

Feedback

Progress bar

A bar that fills up to show how much of a task, such as an upload, is done.

Also known as

How to recognize it

A thin horizontal track that fills with color from left to right, often with a percentage or label nearby.

Variations

Indeterminate
Shows that work is ongoing without knowing how long it will take, often as a moving stripe. Made by leaving out the value attribute.

Behavior

  • The filled part grows as the task progresses and reaches the end when it finishes.
  • It is not interactive; the user only watches it.
  • This demo uses the native <progress> element with a <label>. Only the completion is announced, to avoid reading out every step.

Keyboard

KeyAction
—None. The demo’s start button uses Enter / Space.

Usage notes

  • Do not use it to show progress through the steps of a form. Use step navigation for that.
  • Spinner: A progress bar shows how far along a task is; a spinner only shows that something is happening.
  • Meter: A progress bar shows how far a task has gone; a meter shows a measurement within a known range, such as disk usage.
  • Stepper: A progress bar shows progress within one task; a stepper shows which step of a multi-page procedure the user is on.

Sources