import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},l=n(`

Loading

Intro

Used to indicate the transition state during 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

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

`,16),d=[l],h={__name:"README",setup(o,{expose:s}){return s({frontmatter:{}}),(p,r)=>(a(),t("div",e,d))}};export{h as default};