Loading - Vant 4
Loading
Intro
Used to indicate the transition state during loading.
Install
Register component globally via app.use, refer to Component Registration for more registration ways.
js
import { createApp } from'vue'; import { Loading } from'vant'; const app = createApp(); app.use(Loading);Usage
Type
html
Color
html
Size
html
Text
html
Vertical
html
Text Color
use color or text-color to change text color.
html
Custom Icon
Use icon slot to custom icon.
html
API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| color | Loading color | string | #c9c9c9 |
| type | Can be set to spinner | string | circular | | size | Icon size | number | string | 30px | | text-size | Text font size | number | string | 14px | | text-color | Text color | string | #c9c9c9 |
| vertical | Whether to arrange icons and text content vertically | boolean | false |
Slots
| Name | Description |
|---|---|
| default | Loading text |
| icon | Custom loading icon |
Types
The component exports the following type definitions:
ts
importtype { LoadingType, LoadingProps } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-loading-text-color | var(--van-text-color-2) | - |
| --van-loading-text-font-size | var(--van-font-size-md) | - |
| --van-loading-spinner-color | var(--van-gray-5) | - |
| --van-loading-spinner-size | 30px | - |
| --van-loading-spinner-duration | 0.8s | - |