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

Overview

  • 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.

Demos

How to import

Basic Usage

Combinations

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

Animated Loading

Use active property to display animated loading effects.

API reference

Skeleton

PropertyInstructionstypeDefault
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.Avatar

Skeleton.Image,Skeleton.TitleSkeleton.Button have same APIs with Skeleton.Avatar. shape only supported in Skeleton.Avatar
PropertyInstructionstypeDefault
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

Skeleton.Paragraph

PropertyInstructionstypeDefault
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