创新互联百度小程序教程：progress 进度条
- progress 进度条
- 属性说明
- 示例
- 代码示例 1：默认样式
- 代码示例 2：显示当前百分比
- 代码示例 3：设置颜色
- 代码示例 4：设置宽度、外圆角
- 代码示例 5：设置宽度、内圆角
- 代码示例 6：显示动画
progress 进度条
解释：进度条。
成都创新互联是一家专业提供麟游企业网站建设,专注与成都网站建设、网站建设、H5技术、小程序制作等业务。10年已为麟游众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|
|
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：默认样式
默认样式
代码示例 2：显示当前百分比
显示当前百分比 show-info
代码示例 3：设置颜色
设置颜色 activeColor="#00BC89"
代码示例 4：设置宽度、外圆角
设置宽度、外圆角 border-radius="90" stroke-width="7"
代码示例 5：设置宽度、内圆角
设置宽度、内圆角
代码示例 6：显示动画
显示动画
网页题目：创新互联百度小程序教程：progress 进度条
分享网址：
http://cdbrznjsb.com/article/cdgeegh.html
