Loading Loading

introduce

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

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>

Props

Slots

Style variables

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