• progress 進(jìn)度條
  • 屬性說(shuō)明
  • 示例
    • 代碼示例 1：默認(rèn)樣式
    • 代碼示例 2：顯示當(dāng)前百分比
    • 代碼示例 3：設(shè)置顏色
    • 代碼示例 4：設(shè)置寬度、外圓角
    • 代碼示例 5：設(shè)置寬度、內(nèi)圓角
    • 代碼示例 6：顯示動(dòng)畫(huà)

progress 進(jìn)度條

解釋：進(jìn)度條。

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

屬性說(shuō)明

percent

Float

0

否

百分比 0~100%

show-info

Boolean

false

否

在進(jìn)度條右側(cè)顯示百分比

stroke-width

Number/String

2

否

進(jìn)度條的高度（單位：px）

border-radius

Number/String

0

否

圓角大?。▎挝唬簆x）

3.150.1

font-size

Number/String

16

否

右側(cè)百分比字體大小（單位：px）

3.150.1

color

Color

#09BB07

否

進(jìn)度條顏色（推薦使用 activeColor）

activeColor

Color

#09BB07

否

已選擇的進(jìn)度條的顏色

backgroundColor

Color

#E6E6E6

否

未選擇的進(jìn)度條的顏色

active

Boolean

false

否

進(jìn)度條從左往右的動(dòng)畫(huà)

active-mode

String

backwards

否

backwards：動(dòng)畫(huà)從頭播；forwards：動(dòng)畫(huà)從上次結(jié)束點(diǎn)接著播

duration

Number

20

否

進(jìn)度增加 1% 所需毫秒數(shù)

3.150.1

屬性名	類(lèi)型	默認(rèn)值	必填	說(shuō)明	最低版本

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1：默認(rèn)樣式

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 默認(rèn)樣式
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 2：顯示當(dāng)前百分比

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 顯示當(dāng)前百分比
  
  
  
 show-info
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 3：設(shè)置顏色

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 設(shè)置顏色
  
  
  
 activeColor="#00BC89"
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 4：設(shè)置寬度、外圓角

• SWAN
• CSS

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

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

• SWAN
• CSS

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

代碼示例 6：顯示動(dòng)畫(huà)

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 顯示動(dòng)畫(huà)
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

分享題目：創(chuàng)新互聯(lián)百度小程序教程：progress 進(jìn)度條
分享URL：http://www.5511xx.com/article/cdgeegh.html