---
name: Progress 进度条
route: /progress
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  { Progress }  from '../components/progress'
import  ProgressDemo  from './components/ProgressDemo'

# Progress 进度条

## 基础用法

<ProgressDemo/>

```typescript
import React, { useState } from 'react';
import Progress from 'components/progress';
import Button from 'components/button';
const Component = function() {
    const [current, set] = useState(0);
    return (
        <div>
            <Button
                onClick={() => {
                    set(c => c + 11);
                }}
            >
                add
            </Button>
            <br />
            <span>当前百分比：{current}%</span>
            <br />
            <Progress current={current} />
            <Progress type="circle" current={current} />
            <span>其他</span>
            <br />
            <Progress type="circle" current={[30, 35, 35]} colors={['#FDAF12', '#00A5AA', '#6B3AF6']} />
            <Progress type="circle" current={[11, 22, 33]} colors={['#FDAF12', '#00A5AA', '#6B3AF6']}>
                <div style={{ fontSize: '12px', lineHeight: '20px', color: '#9A9EAC' }}>
                    <p style={{ color: '#101934' }}>
                        <span style={{ fontSize: '24px', lineHeight: '32px', color: '#1A1E2A' }}>
                            16
                        </span>
                        项
                    </p>
                    <p style={{ color: '#9A9EAC' }}>待处理</p>
                </div>
            </Progress>
        </div>
    );
};
Component.defaultProps = {};
export default Component;

```

## API

<Props of={Progress}/>