title:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 进度条 header:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ develop nav:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ component sidebar:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ base_progress

webUrl:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ https://qft12m.smartapps.cn/component/progress/progress

解释：进度条

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 属性说明

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

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 示例

在开发者工具中预览效果

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 扫码体验

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ webUrl:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ https://qft12m.smartapps.cn/component/progress/progress - 图1 /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 请使用百度APP扫码

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 代码示例/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 1：/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 默认样式

:::codeTab

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

:::

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 代码示例/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 2：/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 显示当前百分比

:::codeTab

  1. <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="wrap">
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="card-area">
  3. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="top-description/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-bottom">
  4. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view>显示当前百分比</view>
  5. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view>show-info</view>
  6. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ </view>
  7. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <!--/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 请调试基础版本为3.150.1以上查看/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ font-size="13"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 的效果/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ -->
  8. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="progress"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ percent="40"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ font-size="13"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ activeColor="#3c76ff"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ show-info/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ />
  9. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ </view>
  10. </view>

:::

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 代码示例/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 3：/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 自定义样式

:::codeTab

  1. <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="wrap">
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="card-area">
  3. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="top-description/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-bottom">
  4. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view>自定义样式</view>
  5. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view>stroke-width="7"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ activeColor="#00BC89"</view>
  6. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ </view>
  7. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <!--/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 基础版本为3.150.1以上外层圆角用属性设置，以下用css设置/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ -->
  8. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="progress"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ percent="60"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-radius="90"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ activeColor="#00BC89"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ stroke-width="7"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ />
  9. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ </view>
  10. </view>
  1. .progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ {
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ margin:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ .35rem/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ .23rem;
  3. }
  4. .progress-bar,/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ ///uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 外层圆角设置
  5. .progress-inner-bar/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ {
  6. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-radius:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 30rpx;
  7. }

:::

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 代码示例/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 4：/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 显示动画

:::codeTab

  1. <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="wrap">
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="card-area">
  3. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="top-description/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-bottom">显示动画</view>
  4. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="progress"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ duration="10"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ percent="70"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ color="#38f"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active-mode="backwards"/>
  5. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="progress"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ percent="80"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ color="#38f"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active-mode="forwards"/>
  6. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ </view>
  7. </view>

:::

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 参考示例

在开发者工具中预览效果

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 图片示例/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ ：

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/
/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ webUrl:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ https://qft12m.smartapps.cn/component/progress/progress - 图2 /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/
/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/
/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ webUrl:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ https://qft12m.smartapps.cn/component/progress/progress - 图3 /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/
/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/
/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ webUrl:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ https://qft12m.smartapps.cn/component/progress/progress - 图4 /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 参考示例：设置圆角progress

:::codeTab

  1. <view/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="wrap">
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ <progress/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ class="progress"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ percent="60"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ activeColor="#3c76ff"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ stroke-width="10"/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ active/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ />
  3. </view>

/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 

  1. .wrap/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ {
  2. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ padding:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 0.3rem/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 0.15rem;
  3. }
  4. .progress-bar,/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ //外层圆角
  5. .progress-inner-bar/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ {//内层圆角
  6. /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ /uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ border-radius:/uploads/projects/swan-docs/program-docs/docs/develop/component//uploads/projects/swan-docs/program-docs/docs/develop/component/ 30rpx;
  7. }

:::