• progress 進度條
  • 屬性說明
  • 示例
    • 代碼示例 1：默認樣式
    • 代碼示例 2：顯示當前百分比
    • 代碼示例 3：設置顏色
    • 代碼示例 4：設置寬度、外圓角
    • 代碼示例 5：設置寬度、內(nèi)圓角
    • 代碼示例 6：顯示動畫

progress 進度條

解釋：進度條。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供麟游企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站建設、網(wǎng)站建設、H5技術、小程序制作等業(yè)務。10年已為麟游眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

屬性說明

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

否

右側百分比字體大?。▎挝唬簆x）

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% 所需毫秒數(shù)

3.150.1

屬性名	類型	默認值	必填	說明	最低版本

示例

跳轉編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例 1：默認樣式

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 默認樣式
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 2：顯示當前百分比

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 顯示當前百分比
  
  
  
 show-info
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 3：設置顏色

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 設置顏色
  
  
  
 activeColor="#00BC89"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 4：設置寬度、外圓角

• SWAN
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 設置寬度、外圓角
  
  
  
 border-radius="90" stroke-width="7"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 5：設置寬度、內(nèi)圓角

• SWAN
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 設置寬度、內(nèi)圓角
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 6：顯示動畫

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 顯示動畫
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

當前文章：創(chuàng)新互聯(lián)百度小程序教程：progress 進度條
本文路徑：http://m.fisionsoft.com.cn/article/cdgeegh.html