# Skeleton

- Page: https://jiguang132.com/resources/arco-design/docs/skeleton
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Use gray blocks to occupy the loading data.

## Install

```bash
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](#skeletonimageprops) \| boolean |`-`|
|style|Additional style|CSSProperties |`-`|
|text|Whether to show text placeholder|[SkeletonTextProps](#skeletontextprops) \| boolean |`true`|

### SkeletonImageProps

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

### SkeletonTextProps

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt