vant/src/loading

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" />

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

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-gray-6)	-
--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-animation-duration	0.8s	-