• 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：默认样式

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 默认样式
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 2：显示当前百分比

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 显示当前百分比
  
  
  
 show-info
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 3：设置颜色

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 设置颜色
  
  
  
 activeColor="#00BC89"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 4：设置宽度、外圆角

• SWAN
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 设置宽度、外圆角
  
  
  
 border-radius="90" stroke-width="7"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 5：设置宽度、内圆角

• SWAN
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 设置宽度、内圆角
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 6：显示动画

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 显示动画
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

文章名称：创新互联百度小程序教程：progress 进度条
当前URL：http://www.jxjierui.cn/article/cdgeegh.html