# Loading

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/loading
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Loading state for pages and blocks.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Loading state for pages and blocks.

## When to Use

When the page is partially waiting for asynchronous data or is being rendered, appropriate loading animations can effectively relieve the user's anxiety.

## DotLoading

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| color | Color of the Loading | `'default' \| 'primary' \| 'white' \| string` | `'default'` |

The size of `DotLoading` would automatically be adjusted according to the current text size.

## SpinLoading

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| color | Color of line. Equals to manually set the `--color` CSS variable. | `'default' \| 'primary' \| 'white' \| string` | `'default'` |

### CSS Variables

| Name    | Description          | Default                 |
| ------- | -------------------- | ----------------------- |
| --color | Color of line.       | `var(--adm-color-weak)` |
| --size  | Size of the element. | `32px`                  |

## Loading

In order to maintain compatibility with older versions of usage, we keep the reference to Loading, so if you continue to use Loading, there is still no problem. However, since we are likely to remove the Loading reference in future major version upgrades, if you see this prompt, please replace Loading in the project with DotLoading as soon as possible.

---

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