cnd-components-mcp/componentData/components/加载 Loading.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效果显示隐藏。',
};

```

## API

### Loading

| 参数            | 说明                                                                                                                                                                                                        | 类型                                        | 默认值   | 是否必填 |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------- | -------- |
| tip             | 自定义内容，可以传入 string 或 reactElement                                                                                                                                                                 | React.ReactNode | string                   | -        |          |
| tipAlign        | 自定义内容位置                                                                                                                                                                                              | 'right' | 'bottom'                         | 'bottom' |          |
| visible         | loading 状态, 默认 true                                                                                                                                                                                     | boolean                                     | true     |          |
| size            | 设置动画尺寸                                                                                                                                                                                                | 'large' | 'medium'                         | 'large'  |          |
| indicator       | 自定义动画                                                                                                                                                                                                  | React.ReactNode                             | -        |          |
| color           | 动画颜色                                                                                                                                                                                                    | string                                      | -        |          |
| fullScreen      | 全屏展示                                                                                                                                                                                                    | boolean                                     | -        |          |
| disableScroll   | 当点击 document 的时候，如果包含该节点则不会关闭弹层，<br/>如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组<br/>是否禁用滚动，仅在 fullScreen 模式下生效 | boolean                                     | false    |          |
| children        | 子元素                                                                                                                                                                                                      | React.ReactNode                             | -        |          |
| onVisibleChange | 全屏模式下，loading弹层请求关闭时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*type*: 弹层关闭的来源<br/>*e*: DOM 事件                                                                               | (type: string, e: React.MouseEvent) => void | -        |          |
| safeNode        | 安全节点，仅在 fullScreen 时有效