UI Component LabFeedback
Spinner
A small rotating shape that shows something is loading, without saying how long it will take.
Demo
Also known as
- Loading — Carbon Design System
- プログレスインジケーター — デジタル庁デザインシステム
How to recognize it
A ring with one colored section, or a circle of dots, that keeps spinning.
Behavior
- Shown while waiting for data and removed when loading finishes.
- The spinning shape is decorative; a text such as “Loading…” in a status region tells screen reader users what is happening.
- With the reduce-motion setting, this demo spins more slowly.
Keyboard
| Key | Action |
|---|---|
| — | None. The demo’s load button uses Enter / Space. |
Usage notes
- Use an animated indicator for loading the whole screen. For a small area, a static indicator is enough.
Similar components
- Progress bar: A spinner only shows that something is happening; a progress bar shows how far along it is.
- Skeleton: A spinner is one shape for any wait; a skeleton previews the layout of the content that is loading.
Sources
- Carbon Design System: Loading (Last checked: )
- デジタル庁デザインシステムウェブサイト「プログレスインジケーター」をもとに作成 (Last checked: )