Loading
Loading animation, used to indicate the transition state of loading.
Component Type
Type
Set the indicator type through the type property. Optional values are circular, spinner, dots, wave, default is circular.
html
<wd-loading />
<wd-loading type="spinner" />
<wd-loading type="dots" />
<wd-loading type="wave" />Component Style
Color
Modify the indicator color through the color property.
html
<wd-loading color="#fa34aa" />
<wd-loading type="spinner" color="#fa34aa" />
<wd-loading type="dots" color="#fa34aa" />
<wd-loading type="wave" color="#fa34aa" />Size
Set the indicator size through the size property, supporting number / string types.
html
<wd-loading :size="20" type="wave" />
<wd-loading :size="30" type="wave" />
<wd-loading size="50px" type="wave" />Content Form
Display Text
Set the loading text through the text property or the default slot.
html
<wd-loading text="Loading..."></wd-loading>
<wd-loading>Loading...</wd-loading>
<wd-loading type="spinner">Loading...</wd-loading>
<wd-loading type="wave">Loading...</wd-loading>Horizontal Direction
Set the arrangement direction of text and indicator through the direction property. Optional values are vertical, horizontal, default is vertical.
html
<wd-loading direction="horizontal" text="Loading..."></wd-loading>
<wd-loading direction="horizontal">Loading...</wd-loading>
<wd-loading direction="horizontal" type="spinner">Loading...</wd-loading>
<wd-loading direction="horizontal" type="wave">Loading...</wd-loading>Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| type | Loading indicator type, optional values are circular, spinner, dots, wave | LoadingType | circular |
| color | Set loading indicator color | string | - |
| size | Set loading indicator size | number | string | - |
| text | Loading indicator text | string | - |
| direction | Arrangement direction, optional values are vertical, horizontal | LoadingDirection | vertical |
| inherit-color | Whether to inherit parent element color | boolean | false |
| custom-class | Root node style class name | string | - |
| custom-style | Root node style | string | - |
| custom-spinner-class | Custom loading indicator style class | string | - |
Slots
| name | Description |
|---|---|
| default | Loading text content |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-loading-color-main | $primary-6 | 主色模式颜色 |
| --wot-loading-color-normal | $icon-secondary | 常规模式颜色 |
| --wot-loading-color-white | $icon-white | 白色模式颜色 |
| --wot-loading-color-text | $text-main | 文本颜色 |
| --wot-loading-size | $n-28 | 组件基准尺寸 |
| --wot-loading-size-width | 1em | 容器宽度 |
| --wot-loading-size-height | 1em | 容器高度 |
| --wot-loading-spinner-circle-stroke-width | 15% | 圆形加载器描边宽度 |
| --wot-loading-spinner-circle-radius | $radius-full | 圆形加载器圆角 |
| --wot-loading-spinner-animation-duration | 0.8s | 旋转动画时长 |
| --wot-loading-spinner-dot-width | 10% | 条状点宽度 |
| --wot-loading-spinner-dot-height | 25% | 条状点高度 |
| --wot-loading-spinner-dot-radius | $radius-full | 条状点圆角 |
| --wot-loading-spinner-dots-dot-size | 20% | 点状加载器单点尺寸 |
| --wot-loading-spinner-dots-dot-radius | $radius-full | 点状加载器单点圆角 |
| --wot-loading-wave-gap | 6.25% | 波形加载器间距 |
| --wot-loading-wave-bar-width | 12.5% | 波形加载器单柱宽度 |
| --wot-loading-wave-bar-height | 83.333333% | 波形加载器单柱高度 |
| --wot-loading-wave-bar-radius | $radius-full | 波形加载器单柱圆角 |
| --wot-loading-wave-animation-duration | 834ms | 波形加载器动画时长 |
| --wot-loading-spinner-padding | $padding-ultra-tight | 加载器内边距 |
| --wot-loading-text-spacing | $spacing-extra-tight | 文本与加载器间距 |
| --wot-loading-text-font-size | $typography-body-size-main | 文本字号 |
| --wot-loading-text-line-height | $typography-body-line-height-size-main | 文本行高 |