Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ 214683c0b8fb836e8fc7629b1ab75b97b8a1f714

localeCode: en-US order: 64 category: Feedback title: Skeleton subTitle: Skeleton icon: doc-skeleton

brief: A placeholder preview of content before the data loaded.

Overview

Avatar: Avatar placeholder, by default uses Avatar medium sizing: width: 48px, height: 48px. Supports other sizes after v1.0.
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

import { Skeleton } from '@douyinfe/semi-ui';

Basic Usage

import React from 'react';
import { Skeleton, Switch, Button } from '@douyinfe/semi-ui';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {loading: true};
  }

  showContent() {
    const {loading} = this.state;
    this.setState({
      loading: !loading
    });
  }

  render() {
    const {loading} = this.state;
    return (
      <>
        <span style={{display: 'flex', alignItems: 'center'}}>
          <Switch onChange={() => this.showContent()}/>
          <span style={{marginLeft: '10px' }}>Show Loading Content</span>
        </span>
        <br/>
        <Skeleton placeholder={(<Skeleton.Avatar />)} loading={loading}>
            <Avatar color='blue' style={{marginBottom: 10}}>U</Avatar>
        </Skeleton>
        <br/>
        <Skeleton style={{width: 200, height: 150}} placeholder={(<Skeleton.Image />)} loading={loading}>
            <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
        </Skeleton>
        <br/>
        <Skeleton style={{width: 80}} placeholder={(<Skeleton.Title style={{marginBottom: 10}}/>)} loading={loading}>
            <h4 style={{marginBottom: 0}}>Semi UI</h4>
        </Skeleton>
        <Skeleton style={{width: 240}} placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={loading}>
            <p style={{width: 240}} >Carefully polish the user experience of each component.</p>
        </Skeleton>
        <br/>
        <Skeleton placeholder={(<Skeleton.Button />)} loading={loading}>
            <Button>Button</Button>
        </Skeleton>
      </>
    );
  }
}

Combinations

Image and caption.

import React from 'react';
import { Skeleton } from '@douyinfe/semi-ui';

() => {
  const placeholder = (
    <div>
      <Skeleton.Image style={{width: 200, height: 150}}/>
      <Skeleton.Title style={{width: 120, marginTop: 10}}/>
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true}>
      <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
      <h4>Semi UI</h4>
    </Skeleton>
  )
}

Statistics.

import React from 'react';
import { Skeleton, Descriptions } from '@douyinfe/semi-ui';

() => {
  const placeholder = (
    <div>
      <Skeleton.Paragraph rows={1} style={{width: 80, marginBottom: 10}}/>
      <Skeleton.Title style={{width: 120}}/>
    </div>
  );

  const data = [
    { key: 'Actual User', value: '1,480,000' },
  ];

  return (
    <Skeleton placeholder={placeholder} loading={true}>
      <Descriptions data={data} row />
    </Skeleton>
  )
}

Avatar and title.

import React from 'react';
import { Skeleton, Avatar } from '@douyinfe/semi-ui';

() => {
  const placeholder = (
    <div style={{display: 'flex', alignItems: 'center'}}>
      <Skeleton.Avatar style={{marginRight: 12}}/>
      <Skeleton.Title style={{width: 120}}/>
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true}>
      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
      <span>Semi UI</span>
    </Skeleton>
  )
}

Centered paragraphs and button.

import React from 'react';
import { Skeleton, Button } from '@douyinfe/semi-ui';

() => {
  const style = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '300px',
    marginBottom: '10px',
  }

  const placeholder = (
    <div style={style}>
      <Skeleton.Paragraph style={style} rows={3}/>
      <Skeleton.Button />
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true} style={{textAlign: 'center'}}>
      <div style={{textAlign: 'center'}}>
        <p>Hi, Bytedance dance dance.</p>
        <p>Hi, Bytedance dance dance.</p>
        <Button>Button</Button>
      </div>
    </Skeleton>
  )
}

Avatar, headline and paragraph.

import React from 'react';
import { Skeleton, Avatar } from '@douyinfe/semi-ui';

() => {
  const style = {
    display: 'flex',
    alignItems: 'flex-start'
  }

  const placeholder = (
    <div style={style}>
      <Skeleton.Avatar style={{marginRight: 12}}/>
      <div>
      <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
      <Skeleton.Paragraph style={{width: 240}} rows={3}/>
      </div>
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true}>
    <div style={style}>
      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
      <div>
        <h3>Semi UI</h3>
        <p>Hi, Bytedance dance dance.</p>
        <p>Hi, Bytedance dance dance.</p>
        <p>Hi, Bytedance dance dance.</p>
      </div>
      </div>
    </Skeleton>
  )
}

Table.

import React from 'react';
import { Skeleton, Table } from '@douyinfe/semi-ui';

() => {
  const data = {
        columns: [
        {
            title: 'Name',
            dataIndex: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
    ],
      content: [{
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        },
        {
            key: '4',
            name: 'Disabled User',
            age: 99,
            address: 'Sidney No. 1 Lake Park',
        },
    ]
  }

  const skData = {
    columns: [1,2,3].map(key => {
      const item = {};
      item.title = (<Skeleton.Title style={{width: '0'}}/>)
      item.dataIndex = key;
      return item;
    }),
    dataSource: [1,2,3,4].map(key => {
      const item = {};
      item.key = key;
      [1,2,3].forEach(i => {
        const width = 50 * i;
        item[i] = (<Skeleton.Paragraph style={{width: width}} rows={1}/>)
      })
      return item;
    })
  };

  const placeholder = (
    <div style={{position: 'relative'}}>
      <Table
        style={{backgroundColor: 'var(--semi-color-bg-1)'}}
        columns={skData.columns}
        dataSource={skData.dataSource}
        pagination={false}
      />
      <div style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}></div>
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true}>
    <div>
      <Table columns={data.columns} dataSource={data.content} pagination={false} />
    </div>
    </Skeleton>
  )
}

Animated Loading

Use active property to display animated loading effects.

import React from 'react';
import { Skeleton, Avatar } from '@douyinfe/semi-ui';

() => {
  const style = {
    display: 'flex',
    alignItems: 'flex-start'
  }

  const placeholder = (
    <div style={style}>
      <Skeleton.Avatar style={{marginRight: 12}}/>
      <div>
      <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
      <Skeleton.Paragraph style={{width: 240}} rows={3}/>
      </div>
    </div>
  );

  return (
    <Skeleton placeholder={placeholder} loading={true} active>
    <div style={style}>
      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
      <div>
        <h3>Semi UI</h3>
        <p>Hi, Bytedance dance dance.</p>
        <p>Hi, Bytedance dance dance.</p>
        <p>Hi, Bytedance dance dance.</p>
      </div>
      </div>
    </Skeleton>
  )
}

API reference

Skeleton

Property	Instructions	type	Default
active	Toggle whether to show the animated loading effect	boolean	false
class Name	Class name	string	-
loading	When set to true, the placeholder element is displayed. Otherwise, child element is displayed	boolean	true
placeholder	Elements to be displayed while loading	ReactNode	-
style	Inline style	CSSProperties	-

Skeleton.Avatar

Skeleton.Image,Skeleton.Title，Skeleton.Button have same APIs with Skeleton.Avatar.

Property	Instructions	type	Default
class Name	Class name	string	-
size	Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `medium`, `large`, `extra-large`, v>=1.0	string	`medium`
style	Inline style	CSSProperties	-

Skeleton.Paragraph

Property	Instructions	type	Default
className	Class name	string	-
rows	Set the number of rows in the placeholder paragraph	number	4
style	Inline style	CSSProperties	-

index-en-US.md 10 KB

History Raw

brief: A placeholder preview of content before the data loaded.

Overview

Demos

How to import

Basic Usage

Combinations

Animated Loading

API reference

Skeleton

Skeleton.Avatar

Skeleton.Paragraph

Design Tokens

index-en-US.md 10 KB History Raw

brief: A placeholder preview of content before the data loaded.

Overview

Demos

How to import

Basic Usage

Combinations

Animated Loading

API reference

Skeleton

Skeleton.Avatar

Skeleton.Paragraph

Design Tokens

index-en-US.md 10 KB

History Raw