Skeleton

Use gray blocks to occupy the loading data.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage of skeleton screen.
Use in Paragraph: Set the number of text lines and text width.
Animation: Display animation effects.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Skeleton

Property	Description	Type	DefaultValue
animation	Whether to show animation	boolean	`-`
loading	Whether to show subcomponents. Set `true` to show placeholder	boolean	`true`
className	Additional css class	string \| string[]	`-`
image	Whether to show the picture placeholder	SkeletonImageProps \| boolean	`-`
style	Additional style	CSSProperties	`-`
text	Whether to show text placeholder	SkeletonTextProps \| boolean	`true`

SkeletonImageProps

export interface SkeletonImageProps {
  style?: CSSProperties;
  className?: string;
  /** 图片形状 */
  shape?: "circle" | "square";
  /** 图片尺寸 */
  size?: "small" | "default" | "large";
  /** 图片位置 */
  position?: "left" | "right";
  prefixCls?: string;
}

SkeletonTextProps

export interface SkeletonTextProps {
  style?: CSSProperties;
  className?: string;
  /** 文本行数 */
  rows?: number;
  /** 文本行宽度 */
  width?: number | string | (string | number)[];
  prefixCls?: string;
}