progress 进度条

解释：进度条

属性说明

属性名类型默认值必填说明最低版本
percentFloat否百分比 0~100
show-infoBooleanfalse否在进度条右侧显示百分比
stroke-widthNumber/String2否进度条的高度，单位 px
border-radiusnumber/string0否圆角大小，单位 px3.150.1
font-sizenumber/string16否右侧百分比字体大小，单位 px3.150.1
colorColor#09BB07否进度条颜色 （请使用 activeColor）
activeColorColor#09BB07否已选择的进度条的颜色
backgroundColorColor#E6E6E6否未选择的进度条的颜色
activeBooleanfalse否进度条从左往右的动画
active-modeStringbackwards否backwards: 动画从头播；forwards：动画从上次结束点接着播
durationNumber20否进度增加1%所需毫秒数3.150.1

示例

在开发者工具中预览效果

扫码体验

progress 进度条 - 图1请使用百度APP扫码

代码示例 1： 默认样式

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

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

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>显示当前百分比</view>
  5.             <view>show-info</view>
  6.         </view>
  7.         <progress class="progress" percent="40" activeColor="#3c76ff" show-info active />
  8.     </view>
  9. </view>

代码示例 3： 自定义样式

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>自定义样式</view>
  5.             <view>stroke-width="7" activeColor="#00BC89"</view>
  6.         </view>
  7.         <progress class="progress" percent="60" activeColor="#00BC89" stroke-width="7" active />
  8.     </view>
  9. </view>

代码示例 4： 显示动画

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

参考示例

在开发者工具中预览效果

图片示例 ：

progress 进度条 - 图2

progress 进度条 - 图3

progress 进度条 - 图4

参考示例：设置圆角progress

  1. <view class="wrap">
  2.     <progress class="progress" percent="60" activeColor="#3c76ff" stroke-width="10" active />
  3. </view>
.wrap {
    padding: 0.3rem 0.15rem;
}
.progress-bar, //外层圆角
.progress-inner-bar {//内层圆角
    border-radius: 30rpx;
}