4.5 progress

进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性类型默认值必填说明最低版本
percentnumber
百分比0~1001.0.0
show-infobooleanfalse在进度条右侧显示百分比1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
colorstring#09BB07进度条颜色(请使用activeColor)1.0.0
activeColorstring#09BB07已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards:动画从头播;forwards:动画从上次结束点接着播1.7.0
durationnumber30进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle
动画完成事件2.4.1
以下是实例:
<view class="progress-box">
    <progress percent="20" show-info stroke-width="3"/>
</view>
<view class="progress-box">
    <progress percent="40" active stroke-width="3"/>
    <icon class="progress-cancel" type="cancel">
    </icon>
</view>
<view class="progress-box">
    <progress percent="60" active stroke-width="3"/>
</view>
<view class="progress-box">
    <progress percent="80" color="#10AEFF" active stroke-width="3"/>
</view>
效果图如下: