progress進度條滾動動畫

2021-09-02 04:11:21 字數 516 閱讀 4917

有兩個屬性 max 和 value。

max 表示進度條的進度最大值,必須是大於0,預設值是1。

value 表示當前完成的進度,值的範圍為0~max之間。如果沒有設定max屬性,那麼value屬性值的範圍要在0~1之間。

預設的進度條的樣式為:

修改進度條預設樣式的方法:

1去除進度條的預設樣式

2progress::-webkit-progress-bar{}【偽類】

設定全部進度條的樣式

3progress::-webkit-progress-value{}【偽類】

設定已完成進度條的樣式

相容性:ie9以及更早版本不支援progress。

這是乙個小demo

執行之後的效果:

參考文章 :使用原生js+css或html5實現簡單的進度條和滑動條效果

progress元件(進度條)

progress元件 進度條 progress元件的屬性 percent 型別 number 設定百分比 0 100 show info 型別 布林 在進度條右側顯示百分比 border radius 型別 number 圓角大小 font size 型別 number 右側百分比字型大小 stro...

progress 進度條元件說明

原型 progress percent float 0 100 show info boolean border radius number string font size number string stroke width number activecolor color background...

progress 進度條元件說明

原型 progress percent float 0 100 show info boolean border radius number string font size number string stroke width number activecolor color background...