Skeleton

Overview

Avatar: Avatar placeholder, by default uses Avatar medium sizing: width: 48px, height: 48px. Supports the size and shape properties; see the API reference for their values.
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 can be overridden through class or style.

Demos

How to import

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

Basic Usage

显示加载内容

Code

import { createSignal } from 'solid-js';
import { Avatar, Button, Skeleton, Switch } from '@fibrous/semi-ui-solid';

export default function SkeletonDemo() {
    const [loading, setLoading] = createSignal(true);

    return (
        <>
            <span style={{ display: 'flex', 'align-items': 'center' }}>
                <Switch aria-labelledby="skeleton-basic-toggle" onChange={() => setLoading((value) => !value)} />
                <span id="skeleton-basic-toggle" style={{ 'margin-left': '10px' }}>
                    显示加载内容
                </span>
            </span>
            <br />
            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading()}>
                <Avatar color="blue" style={{ 'margin-bottom': '10px' }}>
                    U
                </Avatar>
            </Skeleton>
            <br />
            <Skeleton style={{ width: '200px', height: '150px' }} placeholder={<Skeleton.Image />} loading={loading()}>
                <img src="/assets/placeholder/avatar-a.svg" height="150" alt="avatar" />
            </Skeleton>
            <br />
            <Skeleton style={{ width: '80px' }} placeholder={<Skeleton.Title style={{ 'margin-bottom': '10px' }} />} loading={loading()}>
                <h4 style={{ 'margin-bottom': '0' }}>Semi UI</h4>
            </Skeleton>
            <Skeleton style={{ width: '240px' }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading()}>
                <p style={{ width: '240px' }}>精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
            </Skeleton>
            <br />
            <Skeleton placeholder={<Skeleton.Button />} loading={loading()}>
                <Button>Button</Button>
            </Skeleton>
        </>
    );
}

Combinations

Image and caption.

Code

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

export default function SkeletonDemo() {
    const placeholder = (
        <div>
            <Skeleton.Image style={{ width: '200px', height: '150px' }} />
            <Skeleton.Title style={{ width: '120px', 'margin-top': '10px' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <img src="/assets/placeholder/avatar-a.svg" height="150" alt="avatar" />
            <h4>Semi UI</h4>
        </Skeleton>
    );
}

Statistics.

Code

import { Descriptions, Skeleton } from '@fibrous/semi-ui-solid';

const data = [{ key: '实际用户数量', value: '1,480,000' }];

export default function SkeletonDemo() {
    const placeholder = (
        <div>
            <Skeleton.Paragraph rows={1} style={{ width: '80px', 'margin-bottom': '10px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );

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

Avatar and title.

Code

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

export default function SkeletonDemo() {
    const placeholder = (
        <div style={{ display: 'flex', 'align-items': 'center' }}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                UI
            </Avatar>
            <span>Semi UI</span>
        </Skeleton>
    );
}

Centered paragraphs and button.

Code

import type { JSX } from 'solid-js';
import { Button, Skeleton } from '@fibrous/semi-ui-solid';

const style: JSX.CSSProperties = {
    display: 'flex',
    'flex-direction': 'column',
    'align-items': 'center',
    width: '300px',
    'margin-bottom': '10px',
};

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

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

Avatar, headline and paragraph.

Code

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

const style = {
    display: 'flex',
    'align-items': 'flex-start',
};

export default function SkeletonDemo() {
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', 'margin-bottom': '12px', 'margin-top': '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <div style={style}>
                <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                    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.

Code

import { Skeleton, Table, type ColumnProps } from '@fibrous/semi-ui-solid';

const columns: ColumnProps[] = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

const dataSource = [
    {
        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 placeholderColumns: ColumnProps[] = [1, 2, 3].map((key) => ({
    key,
    title: () => <Skeleton.Title style={{ width: '0' }} />,
    render: () => <Skeleton.Paragraph style={{ width: `${50 * key}px` }} rows={1} />,
}));

const placeholderDataSource = [1, 2, 3, 4].map((key) => ({ key }));

export default function SkeletonDemo() {
    const placeholder = (
        <div style={{ position: 'relative' }}>
            <Table style={{ 'background-color': 'var(--semi-color-bg-1)' }} columns={placeholderColumns} dataSource={placeholderDataSource} pagination={false} />
            <div style={{ position: 'absolute', left: '0', right: '0', top: '0', bottom: '0' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <div>
                <Table columns={columns} dataSource={dataSource} pagination={false} />
            </div>
        </Skeleton>
    );
}

Animated Loading

Use active property to display animated loading effects.

Code

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

const style = {
    display: 'flex',
    'align-items': 'flex-start',
};

export default function SkeletonDemo() {
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', 'margin-bottom': '12px', 'margin-top': '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading active>
            <div style={style}>
                <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                    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

Props

Property	Description	Type	Default
active	Whether to show the animated loading effect.	`boolean`	-
loading	When true, `placeholder` is shown. Otherwise the children are shown.	`boolean`	`true`
placeholder	Elements shown while loading.	`JSX.Element`	-

class, style, ref and native attributes and events fall through onto the placeholder root element. When loading is false the component renders only the children and has no root element, so these are dropped together with the placeholder. The root's aria-busy="true" cannot be switched off.

Skeleton.Avatar

Props

Property	Description	Type	Default
prefixCls	Class name prefix, `semi-skeleton` by default.	`string`	-
shape	Shape of the avatar placeholder: `circle` or `square`. Defaults to `circle`.	`'circle' \| 'square'`	-
size	Size of the avatar placeholder: `extra-extra-small`, `extra-small`, `small`, `medium`, `large` or `extra-large`. Defaults to `medium`.	`Type`	-
type	Replaces the type of the block, which also names its class. Unless it is `avatar`, `size` and `shape` have no effect.	`string`	-

class, style, ref and native attributes and events fall through onto the placeholder block.

Skeleton.Image

Props

Property	Description	Type	Default
prefixCls	Class name prefix, `semi-skeleton` by default.	`string`	-
type	Replaces the type of the block, which also names its class.	`string`	-

Skeleton.Title

Props

Property	Description	Type	Default
prefixCls	Class name prefix, `semi-skeleton` by default.	`string`	-
type	Replaces the type of the block, which also names its class.	`string`	-

Skeleton.Button

Props

Property	Description	Type	Default
prefixCls	Class name prefix, `semi-skeleton` by default.	`string`	-
type	Replaces the type of the block, which also names its class.	`string`	-

Skeleton.Image, Skeleton.Title and Skeleton.Button have no size or shape; class, style, ref and native attributes and events fall through onto the placeholder block.

Skeleton.Paragraph

Props

Property	Description	Type	Default
prefixCls	Class name prefix, `semi-skeleton` by default.	`string`	-
rows	Number of rows in the placeholder paragraph. Defaults to 4.	`number`	-

class, style, ref and native attributes and events fall through onto the root ul element.

Accessibility

While loading, the outer element of Skeleton carries aria-busy="true", and the placeholder blocks and paragraph carry aria-hidden="true", so screen readers only know that content is loading. An aria-hidden passed by the caller takes precedence on a placeholder block; aria-busy cannot be switched off.
Once loading ends, the children are rendered directly and Skeleton adds no outer element.

Content Guidelines

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

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-skeleton-highlight	1400ms	骨架屏高亮动画时长
$animation_function-skeleton-highlight	ease
$color-skeleton_default-bg-default	var(--semi-color-fill-0)	骨架屏背景色 - 默认
$color-skeleton_loading-gradient-bg-active	var(--semi-color-fill-1)	骨架屏背景色 - 动画开启后
$width-skeleton_avatar_extra_extra_small	20px	头像骨架屏尺寸 - 极小
$width-skeleton_avatar_extra_small	24px	头像骨架屏尺寸 - 超小
$width-skeleton_avatar_small	32px	头像骨架屏尺寸 - 小
$width-skeleton_avatar_medium	48px	头像骨架屏尺寸 - 中
$width-skeleton_avatar_large	72px	头像骨架屏尺寸 - 大
$width-skeleton_avatar_extra_large	128px	头像骨架屏尺寸 - 超大
$width-skeleton_button	115px	按钮骨架屏宽度
$height-skeleton_li	16px	段落骨架屏高度
$height-skeleton_title	$height-control-small	标题骨架屏高度
$height-skeleton_button	$height-control-default	按钮骨架屏高度
$spacing-skeleton_li-marginBottom	10px	按钮骨架屏高度
$radius-skeleton_item	var(--semi-border-radius-small)	骨架屏圆角
$radius-skeleton_li	var(--semi-border-radius-small)	骨架屏圆角