有兩個屬性 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...