전체 카탈로그
Feedback & StatusSkeleton4 props

Skeleton

An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with un...

공식 문서 열기
live previewFeedback & Status

Preview

Import

import {Skeleton} from '@astryxdesign/core/Skeleton';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with un...

skeletonplaceholderloadingshimmerpulseloaderboneghost

Important props

widthnumber | stringoptional
heightnumber | stringoptional
radiusnone | 0 | 1 | 2 | 3 | 4 | roundedoptional

Theming targets

astryx-skeleton

Best practices

  • DoMatch the size and shape of the content being loaded to create a realistic placeholder.
  • DoStagger multiple skeletons with the `index` prop for a natural wave animation.
  • Do notUse when the content dimensions are unknown; use Spinner instead.
  • Do notCombine with a Spinner on the same content area; pick one loading pattern.