Feedback · Skeleton
A placeholder preview of content before the data loaded.


  • Avatar: Avatar placeholder, by default uses Avatar medium sizing: width: 48px, height: 48px. Supports Avatar's size (after v1.0) and shape attributes (after v2.20)
  • Image: Image placeholder, default size: width: 100%, height: 100%.
  • Title: Title placeholder, default size: width: 100%, height: 24px.
  • Paragraph: Content part placeholder, default size: width: 100%, height: 16px, margin-bottom: 10px.
  • Button: Button placeholder, default size: width: 115px, height: 32px.
Note: Default styles could by overwritten through className or style.


How to import

Basic Usage


Image and caption.
Avatar and title.
Centered paragraphs and button.
Avatar, headline and paragraph.

Animated Loading

Use active property to display animated loading effects.

API reference


activeToggle whether to show the animated loading effectbooleanfalse
class NameClass namestring-
loadingWhen set to true, the placeholder element is displayed. Otherwise, child element is displayedbooleantrue
placeholderElements to be displayed while loadingReactNode-
styleInline styleCSSProperties-


Skeleton.Image,Skeleton.TitleSkeleton.Button have same APIs with Skeleton.Avatar. shape only supported in Skeleton.Avatar
class NameClass namestring-
sizeSize of the avatar, one of extra-extra-small, extra-small, small, medium, large, extra-large, v>=1.0stringmedium
styleInline styleCSSProperties-
shapeShape of the avatar, one of circle, squarestringcircle


classNameClass namestring-
rowsSet the number of rows in the placeholder paragraphnumber4
styleInline styleCSSProperties-

Content Guidelines

  • Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED