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-modestringbackwards否backwards:动画从头播;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>
效果图如下: