Skeleton

Provide a placeholder while you wait for content to load or visualize content that doesn't exist yet.

When To Use#

  • When resource needs long time loading, like low network speed.
  • The component contains information, such as a List or Card.
  • Only works when loading data for the first time.
  • Could be replaced by Spin in any situation but can provide a better user experience.
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

Examples

Basic usage.

expand codeexpand code
      Loading...
    

Complex combination with avatar and multiple paragraphs.

expand codeexpand code
      Loading...
    

Display active animation.

expand codeexpand code
      Loading...
    


Size:
Active:


Button Shape:
Avatar Shape:

Skeleton button, avatar, input and image.

expand codeexpand code
      Loading...
    

Ant Design, a design language

We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.

Skeleton contains sub component.

expand codeexpand code
      Loading...
    

Use skeleton in list component.

expand codeexpand code
      Loading...
    

API#

nz-skeleton#

PropertyDescriptionTypeDefault
[nzActive]Show animation effectbooleanfalse
[nzAvatar]Show avatar placeholderboolean | NzSkeletonAvatarfalse
[nzLoading]Display the skeleton when trueboolean-
[nzParagraph]Show the paragraph placeholderboolean | NzSkeletonParagraphtrue
[nzTitle]Show the title placeholderboolean | NzSkeletonTitletrue
[nzRound]Show the paragraph and the title radius when truebooleanfalse

NzSkeletonAvatar#

PropertyDescriptionTypeDefault
sizeSet the avatar sizenumber | 'large' | 'small' | 'default'-
shapeSet the avatar shape'circle' | 'square'-

NzSkeletonTitle#

PropertyDescriptionTypeDefault
widthSet the title widthnumber | string-

NzSkeletonParagraph#

PropertyDescriptionTypeDefault
rowsSet the row count of the paragraphnumber-
widthSet the width of the paragraph. When width is an Array, it can set the width of each row. Otherwise, only set the last row widthnumber | string | Array<number | string>-

nz-skeleton-element [nzType="button"]#

PropertyDescriptionTypeDefault
[nzActive]Show animation effectbooleanfalse
[nzSize]Set the size'large' | 'small' | 'default''default'
[nzShape]Set the shape'square' | 'circle' | 'round' | 'default''default'

nz-skeleton-element [nzType="avatar"]#

PropertyDescriptionTypeDefault
[nzActive]Show animation effectbooleanfalse
[nzSize]Set the sizenumber | 'large' | 'small' | 'default''default'
[nzShape]Set the shape'circle' | 'square''square'

nz-skeleton-element [nzType="input"]#

PropertyDescriptionTypeDefault
[nzActive]Show animation effectbooleanfalse
[nzSize]Set the size'large' | 'small' | 'default''default'

nz-skeleton-element [nzType="image"]#

PropertyDescriptionTypeDefault
[nzActive]Show animation effectbooleanfalse