Loading 加载指示器
加载动画，用于表示加载中的过渡状态。
组件类型
类型
通过 type 属性设置指示器类型，可选值为 circular、spinner、dots，默认为 circular。
html
<wd-loading />
<wd-loading type="spinner" />
<wd-loading type="dots" />组件样式
颜色
通过 color 属性修改指示器的颜色。
html
<wd-loading color="#fa34aa" />
<wd-loading type="spinner" color="#fa34aa" />
<wd-loading type="dots" color="#fa34aa" />大小
通过 size 属性设置指示器的大小，支持 number / string 类型。
html
<wd-loading :size="20" />
<wd-loading :size="30" />
<wd-loading size="50px" />内容形态
显示文字
通过 text 属性或默认插槽设置加载文字。
html
<wd-loading text="加载中..."></wd-loading>
<wd-loading>加载中...</wd-loading>
<wd-loading type="spinner">加载中...</wd-loading>水平方向
通过 direction 属性设置文字与指示器的排列方向，可选值为 vertical、horizontal，默认为 vertical。
html
<wd-loading direction="horizontal" text="加载中..."></wd-loading>
<wd-loading direction="horizontal">加载中...</wd-loading>
<wd-loading direction="horizontal" type="spinner">加载中...</wd-loading>Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 加载指示器类型，可选值为 circular、spinner、dots | LoadingType | circular |
| color | 设置加载指示器颜色 | string | - |
| size | 设置加载指示器大小 | number | string | - |
| text | 加载指示器文字 | string | - |
| direction | 排列方向，可选值为 vertical、horizontal | LoadingDirection | vertical |
| inherit-color | 是否继承父元素颜色 | boolean | false |
| custom-class | 根节点样式类名 | string | - |
| custom-style | 根节点样式 | string | - |
| custom-spinner-class | 自定义加载指示器样式类 | string | - |
Slots
| name | 说明 |
|---|---|
| default | 加载文字内容 |
主题定制
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-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-radius-full | 条状点圆角 |
| --wot-loading-spinner-dots-dot-size | 20% | 点状加载器单点尺寸 |
| --wot-loading-spinner-dots-dot-radius | $radius-radius-full | 点状加载器单点圆角 |
| --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 | 文本行高 |