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

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

## 示例
```tsx
import React from 'react';
import { Loading, Card, Icon } from '@alicloud/console-components';

const commonProps = {
  extra: <Icon type="more" size="small" />,
  showHeadDivider: false,
  title: '卡片',
};

const contentStyle: `React.CSSProperties` = {
  background: '#f6f6f6',
  width: '468px',
  height: '110px',
  borderRadius: '4px',
  textAlign: 'center',
  color: '#aaaaaa',
};

const CardContent = () => <div style={contentStyle} />;

export default () => {
  return (
    <Card style={{ width: 500 }} {...commonProps}>
      <Loading size="medium" visible>
        <CardContent />
      </Loading>
    </Card>
  );
};

export const meta = {
  title: '卡片内容加载',
  describe: '通过visible属性控制loading效果显示隐藏。',
};

```