UI Component Lab 日本語

← All components

Feedback

Skeleton

Gray placeholder shapes that show the layout of content while it loads.

Demo

How to recognize it

Light gray circles and bars where images and lines of text will appear, often with a soft shimmer moving across them.

Behavior

  • Replaced by the real content when loading finishes.
  • Because the layout appears right away, the page feels faster and does not jump when the content arrives.
  • The gray shapes are hidden from assistive technology, and the area is marked aria-busy while loading.

Keyboard

KeyAction
—None. The demo’s reload button uses Enter / Space.
  • Spinner: A skeleton previews the layout of the content; a spinner is one shape that only shows something is loading.

Sources