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
Parameters | Description | Type | Default value |
---|---|---|---|
color | color | string | #c9c9c9 |
type | Type, optional value is spinner | string | circular |
size | Loading icon size, default unit is px | number | string | 60rpx |
text-size | Text size, default unit is px | number | string | 28rpx |
text-color | Text color | string | #c9c9c9 |
vertical | Whether to arrange icons and text content vertically | boolean | false |
Slots
Name | Description |
---|---|
default | Load copy |
icon | Custom 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.
Name | Default | Description |
---|---|---|
--z-loading-text-color | var(--z-text-color-2) | - |
--z-loading-text-font-size | var(--z-font-size-md) | - |
--z-loading-spinner-color | var(--z-gray-5) | - |
--z-loading-spinner-size | 60rpx | - |
--z-loading-spinner-duration | 0.8s | - |