Skeleton

Provide a placeholder at the place which need waiting for loading.

When To Use#

  • When resource need long time loading, like low network speed.
  • The component contains much information, such as List or Card.

Import this Component Individually#

You can get more detail here.

import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

Examples

Basic usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-skeleton-basic',
  template: `
    <nz-skeleton></nz-skeleton>
  `
})
export class NzDemoSkeletonBasicComponent {}

Complex combination with avatar and multiple paragraphs.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-skeleton-complex',
  template: `
    <nz-skeleton [nzAvatar]="true" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
  `
})
export class NzDemoSkeletonComplexComponent {}

Display active animation.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-skeleton-active',
  template: `
    <nz-skeleton [nzActive]="true"></nz-skeleton>
  `
})
export class NzDemoSkeletonActiveComponent {}

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
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-skeleton-children',
  template: `
    <div class="article">
      <nz-skeleton [nzLoading]="loading">
        <h4>Ant Design, a design language</h4>
        <p>
          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.
        </p>
      </nz-skeleton>
      <button nz-button (click)="showSkeleton()" [disabled]="loading">
        Show Skeleton
      </button>
    </div>
  `,
  styles: [
    `
      .article h4 {
        margin-bottom: 16px;
      }
      .article button {
        margin-top: 16px;
      }
    `
  ]
})
export class NzDemoSkeletonChildrenComponent {
  loading = false;

  showSkeleton(): void {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
}

Use skeleton in list component.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-skeleton-list',
  template: `
    <nz-switch [(ngModel)]="loading"></nz-switch>
    <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'vertical'">
      <ng-template #item let-item>
        <nz-list-item
          [nzContent]="loading ? ' ' : item.content"
          [nzActions]="loading ? [] : [starAction, likeAction, msgAction]"
          [nzExtra]="loading ? '' : extra"
        >
          <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzAvatar]="true">
            <ng-template #starAction><i nz-icon nzType="star-o" style="margin-right: 8px;"></i> 156</ng-template>
            <ng-template #likeAction><i nz-icon nzType="like-o" style="margin-right: 8px;"></i> 156</ng-template>
            <ng-template #msgAction><i nz-icon nzType="message" style="margin-right: 8px;"></i> 2</ng-template>
            <nz-list-item-meta [nzAvatar]="item.avatar" [nzTitle]="nzTitle" [nzDescription]="item.description">
              <ng-template #nzTitle
                ><a href="{{ item.href }}">{{ item.title }}</a></ng-template
              >
            </nz-list-item-meta>
            <ng-template #extra>
              <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
            </ng-template>
          </nz-skeleton>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoSkeletonListComponent {
  loading = true;
  listData = new Array(3).fill({}).map((_i, index) => {
    return {
      href: 'http://ng.ant.design',
      title: `ant design part ${index}`,
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
      content:
        '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.'
    };
  });
}

API#

nz-skeleton#

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

NzSkeletonAvatar#

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

NzSkeletonTitle#

PropertyDescriptionTypeDefault
widthSet the width of titlenumber | string-

NzSkeletonParagraph#

PropertyDescriptionTypeDefault
rowsSet the row count of paragraphnumber-
widthSet the width of 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>-