代码拉取完成，页面将自动刷新
加载图标，用于表示加载中的过渡状态。
import { Loading } from "@ls-design/ui-react";
<Loading></Loading>
<Loading type="circular"></Loading>
<Loading type="spinner"></Loading>
默认单位为 px。
<Loading size="20"></Loading>
<Loading size="30"></Loading>
<Loading size="40"></Loading>
<Loading size="30"></Loading> // 默认颜色
<Loading size="30" color="green"></Loading>
<Loading size="30" color="#08f"></Loading>
<Loading size="30">加载中...</Loading>
<Loading size="30" vertical>加载中...</Loading>
<Loading size="30" vertical class="custom-text">加载中...</Loading>
.custom-text {
--loading-text-color: #0088ff;
}
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 图标类型， circular spinner |
string |
spinner |
| color | 图标颜色 | string |
#879099 |
| size | 图标大小，如 20px 2em 2rem 20vm 20vh |
string or number |
30px |
| vertical | 文案是否垂直排列 | boolean |
false |
| 名称 | 解释 |
|---|---|
| loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 |
组件提供了以下 CSS变量，可用于自定义样式
| 名称 | 说明 | 默认值 |
|---|---|---|
--loading-text-color |
加载文案颜色 | #969799 |
--loading-text-font-size |
加载文案文字大小 | 14px |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手