- progress 进度条
- 属性说明
- 示例
- 代码示例 1：默认样式
- 代码示例 2：显示当前百分比
- 代码示例 3：设置颜色
- 代码示例 4：设置宽度、外圆角
- 代码示例 5：设置宽度、内圆角
- 代码示例 6：显示动画
progress 进度条
解释：进度条。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
|
percent |
Float |
0 |
否 |
百分比 0~100% |
|
|
show-info |
Boolean |
false |
否 |
在进度条右侧显示百分比 |
|
|
stroke-width |
Number/String |
2 |
否 |
进度条的高度（单位：px） |
|
|
border-radius |
Number/String |
0 |
否 |
圆角大小（单位：px） |
3.150.1 |
|
font-size |
Number/String |
16 |
否 |
右侧百分比字体大小（单位：px） |
3.150.1 |
|
color |
Color |
#09BB07 |
否 |
进度条颜色（推荐使用 activeColor） |
|
|
activeColor |
Color |
#09BB07 |
否 |
已选择的进度条的颜色 |
|
|
backgroundColor |
Color |
#E6E6E6 |
否 |
未选择的进度条的颜色 |
|
|
active |
Boolean |
false |
否 |
进度条从左往右的动画 |
|
|
active-mode |
String |
backwards |
否 |
backwards：动画从头播；forwards：动画从上次结束点接着播 |
|
|
duration |
Number |
20 |
否 |
进度增加 1% 所需毫秒数 |
3.150.1 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：默认样式
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">默认样式</view><progress class="progress" percent="20" /></view></view>
代码示例 2：显示当前百分比
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>显示当前百分比</view><view>show-info</view></view><!-- 请调试基础版本为3.150.1以上查看 font-size="13" 的效果 --><progress class="progress" percent="40" font-size="13" activeColor="#3c76ff" show-info active /></view></view>
代码示例 3：设置颜色
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>设置颜色</view><view>activeColor="#00BC89"</view></view><progress class="progress" percent="60" activeColor="#00BC89" backgroundColor="#E6E6E6" active /></view></view>
代码示例 4：设置宽度、外圆角
- SWAN
- CSS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>设置宽度、外圆角</view><view>border-radius="90" stroke-width="7"</view></view><!-- 基础版本为3.150.1以上外层圆角用属性设置，以下用css设置 --><progress class="progress" percent="60" border-radius="90" stroke-width="7" backgroundColor="#E6E6E6" active /></view></view>
代码示例 5：设置宽度、内圆角
- SWAN
- CSS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">设置宽度、内圆角</view><progress class="inner-progress" percent="60" backgroundColor="#E6E6E6" stroke-width="7" active /></view></view>
代码示例 6：显示动画
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">显示动画</view><progress class="progress" duration="10" percent="70" color="#38f" active active-mode="backwards" /><progress class="progress" percent="80" color="#38f" active active-mode="forwards" /></view></view>
