ProgressBar 进度条组件 — MXWUI — 风起云涌，雨落无痕 —

用于展示用户操作、任务的进度。支持条形与环形两种形态。

示例图

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-progress-bar": "/components/mxwui/progress-bar/index"
    }
}

页面 .wxml 文件中使用组件

<mx-progress-bar percent="{{50}}" />
<mx-progress-bar type="circle" percent="{{50}}" />

属性：percent，默认 0，范围 0-100。超出范围会自动截断。

<mx-progress-bar percent="{{30}}" />
<mx-progress-bar percent="{{70}}" />

属性：type，可选 line、circle，默认 line。

<mx-progress-bar type="line" percent="{{50}}" />

<mx-progress-bar type="circle" percent="{{50}}" />

属性：status，仅限 line 模式语义展示，可选 success、exception。

成功态会显示成功图标并使用成功色；异常态显示关闭图标并使用异常色。

<mx-progress-bar percent="{{100}}" status="success" />
<mx-progress-bar percent="{{50}}" status="exception" />

属性：strokeColor，进度条填充色。默认主题色 #CA0E2D；success 默认 #098562，exception 默认 #CA0E2D。传入后优先生效。

<mx-progress-bar percent="{{60}}" strokeColor="#1677FF" />

属性：trailColor，未完成轨道色，默认 #EFF0F5。

<mx-progress-bar percent="{{40}}" trailColor="#FFCF9F" strokeColor="#00B578" />

属性：strokeWidth，单位 px，默认 8。条形模式下控制高度，环形模式下控制描边宽度。

<mx-progress-bar percent="{{50}}" strokeWidth="{{12}}" />
<mx-progress-bar type="circle" percent="{{50}}" strokeWidth="{{6}}" />

属性：width，仅 type="circle" 时生效，单位 px，默认 100。

<mx-progress-bar type="circle" percent="{{75}}" width="{{120}}" />

属性：showInfo，默认 true。为 false 时不展示百分比或状态图标。

<mx-progress-bar percent="{{60}}" showInfo="{{false}}" />

属性：animation，默认 true。关闭后进度变化无过渡效果。

<mx-progress-bar percent="{{80}}" animation="{{false}}" />

属性：speed，仅环形有效，每次绘制推进的角度（deg），默认 6。

<mx-progress-bar type="circle" percent="{{80}}" speed="{{10}}" />