Loading

Install

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`	-