Taroify

Loading 加载

加载图标，用于表示加载中的过渡状态。

import { Loading } from "@taroify/core"

代码演示

通过 type 属性可以设置加载图标的类型，默认为 circular，可选值为 spinner。

<Loading />
<Loading type="spinner" />

通过 css 设置加载图标的颜色。

<Loading />
<Loading type="spinner" />

.custom-color {
  color: #1989fa;
  
  .taroify-loading__text {
    color: #1989fa;
  }
}

通过 size 属性设置加载图标的大小，默认单位为 px。

<Loading size="24px" />
<Loading type="spinner" size="24px" />

可以使用默认插槽在图标的右侧插入加载文案。

<Loading size="24px">加载中...</Loading>

设置 vertical 属性后，图标和文案会垂直排列。

<Loading size="24px" direction="vertical">加载中...</Loading>

通过 css 设置加载文案的颜色。

<!-- 可修改文案和加载图标的颜色 -->
<Loading className="custom-color" />

<!-- 只修改文案颜色 -->
<Loading className="custom-text-color" />

.custom-text-color {
  .taroify-loading__text {
    color: #1989fa;
  }
}

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—loading-color	var(—gray-5)	-
—loading-size	30px $hd*	-
—loading-animation-duration	0.8s	-
—loading-circular-border-width	1px $hd*	-
—loading-text-color	var(—gray-6)	-
—loading-text-font-size	var(—font-size-md)	-
—loading-text-line-height	20px $hd*	-