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

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

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@loading-text-color	@gray-6	-
@loading-text-font-size	@font-size-md	-
@loading-spinner-color	@gray-5	-
@loading-spinner-size	30px	-
@loading-spinner-animation-duration	0.8s	-