Skeleton
Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
When To Use
- When a resource needs long time to load.
- When the component contains lots of information, such as 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.
Examples
- Basic ·
basic - Complex combination ·
complex - Active Animation ·
active - Button/Avatar/Input/Image/Node ·
element - Contains sub component ·
children - List ·
list - Custom semantic dom styling ·
style-class
API
Common props ref：Common props
Common API
<Antd component="Alert" title="The following APIs are shared by Skeleton, Avatar, Button, Input, Image, Node." type="info" banner="true"></Antd>
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| active | Show animation effect | boolean | false | - | × |
| classNames | Customize class for each semantic structure inside the Skeleton component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| styles | Customize inline style for each semantic structure inside the Skeleton component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
Skeleton
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| active | Show animation effect | boolean | false | × | |
| avatar | Show avatar placeholder | boolean | SkeletonAvatar | false | × | |
| loading | Display the skeleton when true | boolean | - | × | |
| paragraph | Show paragraph placeholder | boolean | SkeletonParagraphProps | true | × | |
| round | Show paragraph and title radius when true | boolean | false | × | |
| title | Show title placeholder | boolean | SkeletonTitleProps | true | × |
SkeletonTitleProps
| Property | Description | Type | Default |
|---|---|---|---|
| width | Set the width of title | number | string | - |
SkeletonParagraphProps
| Property | Description | Type | Default |
|---|---|---|---|
| rows | Set the row count of paragraph | number | - |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number | string | Array<number | string> | - |
Skeleton.Avatar
| Property | Description | Type | Default |
|---|---|---|---|
| active | Show animation effect, only valid when used avatar independently | boolean | false |
| shape | Set the shape of avatar | circle | square | circle |
| size | Set the size of avatar | number | large | medium | small | medium |
Skeleton.Button
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| active | Show animation effect | boolean | false | |
| block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
| shape | Set the shape of button | circle | round | square | default | - | |
| size | Set the size of button | large | medium | small | medium |
Skeleton.Input
| Property | Description | Type | Default |
|---|---|---|---|
| active | Show animation effect | boolean | false |
| size | Set the size of input | large | medium | small | medium |
Semantic DOM
Skeleton
| Semantic node | Native description | Version |
|---|---|---|
root | Root element with table display, width, animation effects, border radius and other skeleton container basic styles | 6.0.0 |
header | Header element with table cell, padding, vertical alignment and other avatar placeholder area layout styles | 6.0.0 |
section | Section element with skeleton content area layout styles | 6.0.0 |
avatar | Avatar element with inline-block display, vertical alignment, background color, size, border radius and other avatar placeholder styles | 6.0.0 |
title | Title element with width, height, background color, border radius and other title placeholder styles | 6.0.0 |
paragraph | Paragraph element with padding, list item styles, background color, border radius and other paragraph placeholder styles | 6.0.0 |
Semantic description source: vendor/components/skeleton/demo/_semantic.tsx
Skeleton.Element
| Semantic node | Native description | Version |
|---|---|---|
root | Root element | 6.0.0 |
content | Content element | 6.0.0 |
Semantic description source: vendor/components/skeleton/demo/_semantic_element.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
| Token | Type | Native description |
|---|---|---|
color | string | See native declaration and inherited types |
colorGradientEnd | string | See native declaration and inherited types |
gradientFromColor | string | Start color of gradient |
gradientToColor | string | End color of gradient |
titleHeight | number | string | Height of title skeleton |
blockRadius | number | Border radius of skeleton |
paragraphMarginTop | number | Margin top of paragraph skeleton |
paragraphLiHeight | number | Line height of paragraph skeleton |
Declaration source: vendor/components/skeleton/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs';
import type { CSSUtil, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/** @deprecated use gradientFromColor instead. */
color: string;
/** @deprecated use gradientToColor instead. */
colorGradientEnd: string;
/**
* @desc 渐变色起点颜色
* @descEN Start color of gradient
*/
gradientFromColor: string;
/**
* @desc 渐变色终点颜色
* @descEN End color of gradient
*/
gradientToColor: string;
/**
* @desc 标题骨架屏高度
* @descEN Height of title skeleton
*/
titleHeight: number | string;
/**
* @desc 骨架屏圆角
* @descEN Border radius of skeleton
*/
blockRadius: number;
/**
* @desc 段落骨架屏上间距
* @descEN Margin top of paragraph skeleton
*/
paragraphMarginTop: number;
/**
* @desc 段落骨架屏单行高度
* @descEN Line height of paragraph skeleton
*/
paragraphLiHeight: number;
}
interface SkeletonToken extends FullToken<'Skeleton'> {
skeletonAvatarCls: string;
skeletonTitleCls: string;
skeletonParagraphCls: string;
skeletonButtonCls: string;
skeletonInputCls: string;
skeletonNodeCls: string;
skeletonImageCls: string;
imageSizeBase: number | string;
skeletonLoadingBackground: string;
skeletonLoadingMotionDuration: string;
borderRadius: number;
}
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/skeleton/Avatar.tsxvendor/components/skeleton/Button.tsxvendor/components/skeleton/Element.tsxvendor/components/skeleton/Image.tsxvendor/components/skeleton/Input.tsxvendor/components/skeleton/Node.tsxvendor/components/skeleton/Paragraph.tsxvendor/components/skeleton/Skeleton.tsxvendor/components/skeleton/Title.tsxvendor/components/skeleton/style/index.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.