progress 进度条

解释:进度条

# 属性说明

属性名 类型 默认值 必填 说明 最低版本
percent Float 百分比 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

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度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>
              <!-- 请调试基础版本为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;
            }