## 简介

进度指示也称进度条，常用于可视化展示比例、进展、完成度等类型信息。

## 示例

```tsx
import React from 'react';
import { Progress } from '@alicloud/console-components';

export default () => {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 1 }}>
        <h5>默认</h5>
        <div>
          <Progress percent={80} state="normal" />
          <Progress percent={60} state="success" />
          <Progress percent={40} state="error" />
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <h5>小号</h5>
        <div>
          <Progress percent={80} state="normal" size="small" />
          <Progress percent={60} state="success" size="small" />
          <Progress percent={40} state="error" size="small" />
        </div>
      </div>
    </div>
  );
};

export const meta = {
  title: '条形状态',
  describe: '进度条默认为条形状态。',
};

```

```tsx
import React from 'react';
import { Progress } from '@alicloud/console-components';

const h2Style = {
  fontSize: '12px',
  lineHeight: '22px',
  marginTop: '24px',
};
const containerStyle = {
  display: 'flex',
  gap: '10px',
};
export default () => {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 1 }}>
        <div style={h2Style}>默认</div>
        <div style={containerStyle}>
          <Progress shape="circle" percent={80} state="normal" />
          <Progress shape="circle" percent={60} state="success" />
          <Progress shape="circle" percent={40} state="error" />
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <div style={h2Style}>小号</div>
        <div style={containerStyle}>
          <Progress shape="circle" percent={80} state="normal" size="small" />
          <Progress shape="circle" percent={60} state="success" size="small" />
          <Progress shape="circle" percent={40} state="error" size="small" />
        </div>
      </div>
    </div>
  );
};

export const meta = {
  title: '环形状态',
  describe: '通过设置shape属性为circle，设置成环形样式。',
};

```

## API

### Progress

| 参数            | 说明                                                                                                                              | 类型                                                           | 默认值                                    | 是否必填 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------- | -------- |
| shape           | 形态                                                                                                                              | 'circle' | 'line'                                             | 'line'                                    |          |
| size            | 尺寸                                                                                                                              | 'small' | 'medium' | 'large'                                 | 'medium'                                  |          |
| percent         | 所占百分比                                                                                                                        | number                                                         | 0                                         |          |
| state           | 进度状态, 显示优先级: color > progressive > state                                                                               | 'normal' | 'success' | 'error'                               | 'normal'                                  |          |
| progressive     | 是否为色彩阶段变化模式, 显示优先级: color > progressive > state                                                                 | boolean                                                        | false                                     |          |
| hasBorder       | 是否添加 Border（只适用于 Line Progress)                                                                                          | boolean                                                        | false                                     |          |
| textRender      | 文本渲染函数<br/><br/>**签名**:<br/>**参数**:<br/>*percent*: 当前的进度信息<br/>*option*: 额外的参数<br/>**返回值**:<br/>文本节点 | (percent: number, option?: {rtl?: boolean}) => React.ReactNode | percent => \`${Math.floor(percent)}%\` |          |
| color           | 进度条颜色, 显示优先级: color > progressive > state                                                                             | string                                                         | -                                         |          |
| backgroundColor | 背景色                                                                                                                            | string                                                         | -                                         |          |