progress 进度条
- 属性说明
- 示例

progress 进度条

解释：进度条。

属性说明

属性名	类型	默认值	必填	说明	最低版本
percent	Float	0	否	百分比 0~100%
show-info	Boolean	false	否	在进度条右侧显示百分比
stroke-width	Number/String	2	否	进度条的高度（单位：px）
border-radius	Number/String	0	否	圆角大小（单位：px）	3.150.1
font-size	Number/String	16	否	右侧百分比字体大小（单位：px）	3.150.1
color	Color	#09BB07	否	进度条颜色（推荐使用 activeColor）
activeColor	Color	#09BB07	否	已选择的进度条的颜色
backgroundColor	Color	#E6E6E6	否	未选择的进度条的颜色
active	Boolean	false	否	进度条从左往右的动画
active-mode	String	backwards	否	backwards：动画从头播；forwards：动画从上次结束点接着播
duration	Number	20	否	进度增加 1% 所需毫秒数	3.150.1

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

SWAN

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

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

SWAN

<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：设置颜色

SWAN

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置颜色</view>
            <view>activeColor="#00BC89"</view>
        </view>
        <progress class="progress" percent="60" activeColor="#00BC89" backgroundColor="#E6E6E6" active />
    </view>
</view>

代码示例 4：设置宽度、外圆角

SWAN
CSS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置宽度、外圆角</view>
            <view>border-radius="90" stroke-width="7"</view>
        </view>
        <!-- 基础版本为3.150.1以上外层圆角用属性设置，以下用css设置 -->
        <progress class="progress" percent="60" border-radius="90" stroke-width="7" backgroundColor="#E6E6E6" active />
    </view>
</view>

代码示例 5：设置宽度、内圆角

SWAN
CSS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            设置宽度、内圆角
        </view>
        <progress class="inner-progress" percent="60" backgroundColor="#E6E6E6" stroke-width="7" active />
    </view>
</view>

代码示例 6：显示动画

SWAN

<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>