---
title: Progress 进度条 (done)
order: 33
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

### 基本使用

```jsx
import React from 'react';
import { Progress, Row, Col } from 'quanta-design';

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={8}>
        <Progress percent={30} />
        <Progress percent={50} status="active" />
        <Progress percent={70} status="exception" />
        <Progress percent={100} />
        <Progress percent={50} showInfo={false} />
      </Col>
      <Col span={8}>
        <div>
          <Progress percent={30} size="small" />
          <Progress percent={50} size="small" status="active" />
          <Progress percent={70} size="small" status="exception" />
          <Progress percent={100} size="small" />
        </div>
      </Col>
      <Col span={8}>
        <div>
          <Progress percent={50} showInfo={false} />
          <span style={{ color: '#7F7F7F' }}>50%，打包中…</span>
        </div>
        <div>
          <Progress percent={50} showInfo={false} status="exception" />
          <span style={{ color: '#7F7F7F' }}>50%，打包中…</span>
        </div>
        <div>
          <Progress percent={100} showInfo={false} />
          <span style={{ color: '#7F7F7F' }}>100%，打包完成</span>
        </div>
      </Col>
    </Row>
  </div>
);
```

### 圆形进度条

```jsx
import React from 'react';
import { Progress, Row, Col } from 'quanta-design';

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={12}>
        <div>
          <Progress type="circle" percent={75} style={{ marginRight: 8 }} />
          <Progress
            type="circle"
            percent={70}
            status="exception"
            style={{ marginRight: 8 }}
          />
          <Progress type="circle" percent={100} />
        </div>
      </Col>
      <Col span={12}>
        <div>
          <Progress
            type="circle"
            percent={30}
            width={80}
            style={{ marginRight: 8 }}
          />
          <Progress
            type="circle"
            percent={70}
            width={80}
            status="exception"
            style={{ marginRight: 8 }}
          />
          <Progress type="circle" percent={100} width={80} />
        </div>
      </Col>
    </Row>
  </div>
);
```