cnd-components-mcp/componentData/components/Progress/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```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，设置成环形样式。',
};

```