# 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

# 图标样式

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

<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

# 文字样式

同时也提供了 textSizetextStyle 改变文字的样式。

<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 -
Last updated: 2021/7/22 下午6:39:12
10:44