• Vant React

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;
  }
}

API

Props

参数 说明 类型 默认值
type 类型，可选值为 spinner string circular
size 加载图标大小，默认单位为 px number | string 30px
direction 排列方向，可选值为 horizontal string vertical
children 加载文案 ReactNode -

主题定制

样式变量

组件提供了下列 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 -