百度智能小程序 进度条
progress 进度条
解释：进度条
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
percent | Float | 否 | 百分比 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 |
示例
代码示例 1： 默认样式
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">默认样式</view>
<progress class="progress" percent="20" activeColor="#3c76ff" />
</view>
</view>代码示例 2： 显示当前百分比
<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： 自定义样式
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
<view>自定义样式</view>
<view>stroke-width="7" activeColor="#00BC89"</view>
</view>
<!-- 基础版本为3.150.1以上外层圆角用属性设置，以下用css设置 -->
<progress class="progress" percent="60" border-radius="90" activeColor="#00BC89" backgroundColor="#E6E6E6" stroke-width="7" active />
</view>
</view>.progress {
margin: .35rem .23rem;
}
.progress-bar, // 外层圆角设置
.progress-inner-bar {
border-radius: 30rpx;
}代码示例 4： 显示动画
<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>参考示例
图片示例
参考示例：设置圆角 progress
<view class="wrap">
<progress class="progress" percent="60" activeColor="#3c76ff" stroke-width="10" active />
</view>.wrap {
padding: 0.3rem 0.15rem;
}
.progress-bar, //外层圆角
.progress-inner-bar {//内层圆角
border-radius: 30rpx;
}