# Loading 加载中

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

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

show 控制图标是否显示，vertical 改变排列方向。

<pi-loading show>加载中1</pi-loading>
<pi-loading show vertical>加载中2</pi-loading>

1
2

# 图标类型

提供 spinner 菊花， round 圆环两种类型的加载图标。

<pi-loading show type="spinner">示例3</pi-loading>
<pi-loading show type="round">示例4</pi-loading>

1
2

# 图标样式

图标的大小颜色可以通过 size 和 color 属性进行控制。

<pi-loading show type="round">示例5</pi-loading>
<pi-loading show type="round" color="#ff508a">示例6</pi-loading>
<pi-loading show type="round" color="#ff508a" size="50">示例7</pi-loading>

1
2
3

# 文字样式

同时也提供了 textSize 和 textStyle 改变文字的样式。

<pi-loading show type="round" text-size="24">示例8</pi-loading>
<pi-loading show type="round" color="#ff508a" text-size="36">示例9</pi-loading>
<pi-loading
  show
  type="round"
  color="#ff508a"
  text-size="24"
  :text-style="{ color: 'red', fontWeight: '700', fontSize: '48rpx' }"
>
  示例10
</pi-loading>

1
2
3
4
5
6
7
8
9
10
11

# API

# Loading Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	`Object`	`false`	{}
customClass	自定义样式类	`String`	`false`	''
show	是否显示loading	`Boolean`	`false`	false
color	颜色	`String`	`false`	''
type	loading类型, 可选值为'spinner'-菊花, 'round'-圆环	`String`	`false`	'spinner'
size	尺寸,默认单位rpx	`String`/`Number`	`false`	32
vertical	是否垂直排列	`Boolean`	`false`	false
textSize	文字尺寸,默认单位rpx	`String`/`Number`	`false`	'28'
textStyle	文字样式	`Object`	`false`	{}

# Loading Slots

名称	描述	插槽内容
default	slot default	-

← Img 图片 Button 按钮 →