百度智能小程序 进度条

progress 进度条

解释：进度条

属性说明

示例 

在开发者工具中打开

代码示例 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>
        <!-- 请调试基础版本为3.150.1以上查看 font-size="13" 的效果 -->
        <progress class="progress" percent="40" font-size="13" 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>
        <!-- 基础版本为3.150.1以上外层圆角用属性设置，以下用css设置 -->
        <progress class="progress" percent="60" border-radius="90" activeColor="#00BC89" backgroundColor="#E6E6E6" stroke-width="7" active />
    </view>
</view>

.progress {
    margin: .35rem .23rem;
}
.progress-bar, // 外层圆角设置
.progress-inner-bar {
    border-radius: 30rpx;
}

代码示例 4： 显示动画

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">显示动画</view>
        <progress class="progress" duration="10" 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;
}