/*! For license information please see 7046.01a6a5db.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["7046"],{90258:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Loading

\n

Intro

\n

Used to indicate the transition state during loading.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Loading } from 'vant';\n\nconst app = createApp();\napp.use(Loading);\n
\n

Usage

\n

Type

\n
<van-loading />\n\n<van-loading type="spinner" />\n
\n

Color

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

Size

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

Text

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

Vertical

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

Text Color

\n

use color or text-color to change text color.

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

Custom Icon

\n

Use icon slot to custom icon.

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
colorLoading colorstring#c9c9c9
typeCan be set to spinnerstringcircular
sizeIcon sizenumber | string30px
text-sizeText font sizenumber | string14px
text-colorText colorstring#c9c9c9
verticalWhether to arrange icons and text content verticallybooleanfalse
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultLoading text
iconCustom loading icon
\n

Types

\n

The component exports the following type definitions:

\n
import type { LoadingType, LoadingProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-loading-text-colorvar(--van-text-color-2)-
--van-loading-text-font-sizevar(--van-font-size-md)-
--van-loading-spinner-colorvar(--van-gray-5)-
--van-loading-spinner-size30px-
--van-loading-spinner-duration0.8s-
\n
'},null,8,l))}}}]);