---
name: Progress
title: 进度条
category: 基础内容
owner: 陈骁
---

## 示例

```atom 基础示例
<template>
    <view class="section">
        <progress class="progress" percent="20" activeColor="#3c76ff" stroke-width="2" show-info />
        <progress class="progress" percent="40" activeColor="#3c76ff" active />
        <progress class="progress" percent="60" activeColor="#3c76ff" active />
        <progress class="progress" percent="80" activeColor="#74fa7d" active />
    </view>
</template>

<script type="config">
    {
        components: {
            progress: 'components/Progress/Progress',
            view: 'components/View/View'
        }
    }
</script>

<style module>
    .section {
        background: #fff;
        padding: .3rem .1rem;
    }
    .progress {
        margin-bottom: .3rem;
    }

    .progress:last-child {
        margin-bottom: 0;
    }
</style>
```

## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
percent | string \| number | 0 | 可选 | 大小：default（默认尺寸）；mini（小尺寸） | -
showInfo | boolean | false | 可选 | 是否展示文字信息 | -
strokeWidth | number \| string | 2 | 可选 | 进度条线的宽度，单位&nbsp;px | -
color | string | #09bb07 | 可选 | 进度条颜色&nbsp;（请使用&nbsp;activeColor） | -
activeColor | string | - | 可选 | 已选择的进度条的颜色 | -
backgroundColor | string | #e6e6e6 | 可选 | 未选择的进度条的颜色 | -
active | boolean | false | 可选 | 进度条从左往右的动画 | -
activeMode | string | backwards | 可选 | 动画模式：backwards:&nbsp;动画从头播；forwards：动画从上次结束点接着播 | -



### Events
无