加载 Loading
加载中的过渡状态
使用
API用法示例
基本使用
<ti-loading></ti-loading>
自定义展示模式
loading 支持 circular 和 spinner 两种模式
<ti-loading mode="circular"></ti-loading>
<ti-loading mode="spinner"></ti-loading>
自定义加载颜色, 尺寸
<ti-loading color="#ff0000" mode="circular" ></ti-loading>
<ti-loading color="#ff0000" mode="spinner" ></ti-loading>
<ti-loading mode="circular" size="108" ></ti-loading>
<ti-loading mode="spinner" size="108" ></ti-loading>
添加文字
<ti-loading mode="circular" text="loading..."></ti-loading>
<ti-loading mode="spinner" text="loading..."></ti-loading>
<ti-loading color="#ff0000" mode="circular" text="loading..."></ti-loading>
<ti-loading color="#ff0000" mode="spinner" text="loading..."></ti-loading>
ti-loading API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| text | string | 否 | - | loading 文字 | - |
| size | string | 否 | - | loading 尺寸 | - |
| mode | circular | spinner | 否 | circular | 展示模式 | - |
| direction | string | 否 | - | 文字和加载图标的排列方式 | - |
| color | string | 否 | theme.color.gray.texticon.400 | 自定义颜色 | - |
可扩展样式名 External Class
| 名称 | 说明 | 备注 |
|---|---|---|
| ext-class | 根节点可扩展的类名 | - |
CSS 变量 CSS Variables
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--loading-duration | 800ms | 动画时长 | - |
--loading-direction | row | 文字和加载图标的排列方式 | - |
--loading-color | theme.color.gray.texticon.400 | 主体颜色 | - |
--loading-width | 6px | 加载框的宽度 | - |
--loading-text-color | theme.color.gray.texticon.400 | 文字颜色 | - |
--loading-text-padding-v | theme.spacing.vertical.v3 | 文字垂直方向内间距（垂直模式） | - |
theme.spacing.vertical.v0 | 文字垂直方向内间距（水平模式） | - | |
--loading-text-padding-h | theme.spacing.horizontal.h0 | 文字水平方向内间距（垂直模式） | - |
theme.spacing.horizontal.h2 | 文字水平方向内间距（水平模式） | - | |
--loading-wrap-padding-v | 6px | - | - |
--loading-wrap-padding-h | 6px | - | - |
--loading-margin | 0 | - | - |
--loading-font-size | theme.fontSize.t6 | 文字字号 | - |
--loading-line-height | theme.lineHeight.multiline.t3 | 文字行高 | - |
--loading-font-weight | theme.fontWeight.regular | 文字字重 | - |