progress 进度条

解释：进度条

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1： 默认样式

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">默认样式</view>        <progress class="progress" percent="20" activeColor="#3c76ff"/>    </view></view>

代码示例 2： 显示当前百分比

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            <view>显示当前百分比</view>            <view>show-info</view>        </view>        <progress class="progress" percent="40" activeColor="#3c76ff" show-info active />    </view></view>

代码示例 3： 自定义样式

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            <view>自定义样式</view>            <view>stroke-width="7" activeColor="#00BC89"</view>        </view>        <progress class="progress" percent="60" activeColor="#00BC89" stroke-width="7" active />    </view></view>

代码示例 4： 显示动画

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">显示动画</view>        <progress class="progress" percent="70" color="#38f" active active-mode='backwards'/>        <progress class="progress" percent="80" color="#38f" active active-mode='forwards'/>    </view></view>

参考示例

在开发者工具中预览效果

图片示例 ：

参考示例：设置圆角progress

<view class="wrap">    <progress class="progress" percent="60" activeColor="#3c76ff" stroke-width="10" active /></view>

.wrap {
    padding: 0.3rem 0.15rem;
}
.progress-bar, //外层圆角
.progress-inner-bar {//内层圆角
    border-radius: 30rpx;
}