跳至主要內容

组件_progress

刘春龙原创...小于 1 分钟WEB前端小程序教程文档

基本进度条

<progress percent="20" />
属性说明
属性类型默认值必填说明
percentnumber百分比 0~100
show-infobooleanfalse在进度条右侧显示百分比
border-radiusnumber/string0圆角大小
font-sizenumber/string16右侧百分比字体大小
stroke-widthnumber/string6进度条线的宽度
activeColorstring#09BB07进度条颜色
backgroundColorstring#EBEBEB未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
durationnumber30进度增加 1%所需毫秒数
<progress percent="20" />
<progress percent="20" show-info />
<progress percent="20" show-info font-size="30" />
<progress percent="20" show-info font-size="30" stroke-width="20" />
<progress percent="20" border-radius="5" />
<progress percent="20" border-radius="5" activeColor="#f00" />
<progress
  percent="20"
  border-radius="5"
  activeColor="#f00"
  backgroundColor="#00f"
/>
<progress
  percent="20"
  border-radius="5"
  activeColor="#f00"
  backgroundColor="#00f"
  active
/>
<progress
  percent="20"
  border-radius="5"
  activeColor="#f00"
  backgroundColor="#00f"
  active
  duration="90"
/>
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7