vant/packages/vant/src/loading/README.md

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.

import { createApp } from 'vue';
import { Loading } from 'vant';

const app = createApp();
app.use(Loading);

Usage

Type

<van-loading />

<van-loading type="spinner" />

Color

<van-loading color="#1989fa" />

<van-loading type="spinner" color="#1989fa" />

Size

<van-loading size="24" />

<van-loading type="spinner" size="24px" />

Text

<van-loading size="24px">Loading...</van-loading>

Vertical

<van-loading size="24px" vertical>Loading...</van-loading>

Text Color

use color or text-color to change text color.

<!-- the color of text and icon will be changed -->
<van-loading color="#0094ff" />

<!-- only change text color -->
<van-loading text-color="#0094ff" />

Custom Icon

Use icon slot to custom icon.

<van-loading vertical>
  <template #icon>
    <van-icon name="star-o" size="30" />
  </template>
  Loading...
</van-loading>

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:

import type { 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	-