Loading Loading

introduce

Loading icon, used to indicate the transition state of loading.

Code Demo

Loading type

The type of loading icon can be set through the type attribute. The default value is circular and the optional value is spinner.

<z-loading />

<z-loading type="spinner" />

Custom color

Set the color of the loading icon through the color attribute.

<z-loading color="#1989fa" />

<z-loading type="spinner" color="#1989fa" />

Custom size

Set the size of the loading icon through the size attribute, the default unit is px.

<z-loading size="24" />

<z-loading type="spinner" size="48rpx" />

Load copy

Loading copy can be inserted to the right of the icon using the default slot.

<z-loading size="48rpx">Loading...</z-loading>

Vertical arrangement

After setting the vertical attribute, the icon and copy will be arranged vertically.

<z-loading size="48rpx" vertical>Loading...</z-loading>

Customized copy color

Use the color or text-color attribute to set the color of the loaded copy.

<!-- The color of the copy and loading icon can be modified -->
<z-loading color="#0094ff" />

<!-- Only modify the color of the copy -->
<z-loading text-color="#0094ff" />

Custom icon

Loading icons can be customized through the icon slot.

<z-loading vertical>
   <template #icon>
     <z-icon name="undo" size="30" />
   </template>
   loading...
</z-loading>

API

Props

ParametersDescriptionTypeDefault value
colorcolorstring#c9c9c9
typeType, optional value is spinnerstringcircular
sizeLoading icon size, default unit is pxnumber | string60rpx
text-sizeText size, default unit is pxnumber | string28rpx
text-colorText colorstring#c9c9c9
verticalWhether to arrange icons and text content verticallybooleanfalse

Slots

NameDescription
defaultLoad copy
iconCustom loading icon

Theme customization

Style variables

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

NameDefaultDescription
--z-loading-text-colorvar(--z-text-color-2)-
--z-loading-text-font-sizevar(--z-font-size-md)-
--z-loading-spinner-colorvar(--z-gray-5)-
--z-loading-spinner-size60rpx-
--z-loading-spinner-duration0.8s-