메인 콘텐츠로 이동

Skeleton

A loading placeholder that previews the shape of content before it loads.

Overview

Skeleton renders a neutral placeholder element that mimics the shape of the content it replaces. Use it during data fetching to reduce perceived layout shift and communicate that content is on its way.
  • Match the variant to the shape of the content: text for lines, circular for avatars or icons, rectangular for images or cards.
  • Use style to set explicit width and height when the skeleton needs to match a specific content region.
  • Prefer pulse for most cases. Use wave for a more prominent shimmer effect. Use none when motion is distracting (e.g., inside a dense table).

Accessibility

  • Skeleton renders with aria-hidden="true" so screen readers skip the placeholder entirely.
  • Pair skeletons with a live region (e.g., aria-live="polite") that announces when content has finished loading.
  • The pulse and wave animations respect the prefers-reduced-motion media query.

Import

import { Skeleton } from "@cocso-ui/react";

Default

A composite skeleton mimicking a typical list item with an avatar and text lines.

Variant

Three shape variants match the geometry of common UI elements.

Animation

Three animation modes: pulse fades in and out, wave sweeps a shimmer effect, none is static.

API Reference

Skeleton

PropTypeDefaultDescription
variant"text" | "circular" | "rectangular""text"Controls the shape of the skeleton. Match this to the shape of the content being loaded.
animation"pulse" | "wave" | "none""pulse"Controls the animation style. Use `none` when the skeleton appears in a dense or motion-sensitive context.