支付宝小程序基础组件 进度条·Progress
当页面在请求数据过程中，会出现信息读取的进度过程。
扫码体验
示例代码
<!-- API-DEMO page/component/progress.axml -->
<view class="page">
<view class="page-description">进度条</view>
<view class="page-section">
<view class="page-section-demo">
<progress percent="20" show-info/>
<progress percent="40" active/>
<progress percent="60" stroke-width="10"/>
<progress percent="80" active-Color="#6abf47" backgroundColor="#f4333c" />
</view>
</view>
</view>
// API-DEMO page/component/progress.js
Page({});
/* API-DEMO page/component/progress.acss */
progress{
margin-bottom: 60rpx;
}属性
| 属性名 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| percent | Float | - | 百分比(0~100)。 | - |
| show-info | Boolean | show-info="{{false}}" | 在右侧显示百分比值。 | - |
| stroke-width | Number | 6 | 线的粗细，单位 px。 | - |
| active-color | Color | #09BB07 |
已选择的进度条颜色。 | - |
| background-color | Color | - | 未选择的进度条颜色。 | - |
| active | Boolean | active="{{false}}" | 是否添加从0%开始加载的入场动画。 | - |