Spin加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

代码演示

一个简单的 loading 状态。

TypeScript
JavaScript
import React from 'react';
import { Spin } from 'antd';

const App: React.FC = () => <Spin />;

export default App;

容器

放入一个容器中。

TypeScript
JavaScript
import React from 'react';
import { Spin } from 'antd';

const App: React.FC = () => (
  <div className="example">
    <Spin />
  </div>
);

export default App;
.example {
  margin: 20px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

Alert message title

Further details about the context of this alert.

自定义描述文案

自定义描述文案。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space, Spin } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Space>
      <Spin tip="Loading" size="small">
        <div className="content" />
      </Spin>
      <Spin tip="Loading">
        <div className="content" />
      </Spin>
      <Spin tip="Loading" size="large">
        <div className="content" />
      </Spin>
    </Space>

    <Spin tip="Loading...">
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </Spin>
  </Space>
);

export default App;
.content {
  padding: 50px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

自定义指示符

使用自定义指示符。

TypeScript
JavaScript
import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

const App: React.FC = () => <Spin indicator={antIcon} />;

export default App;

各种大小

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

TypeScript
JavaScript
import React from 'react';
import { Space, Spin } from 'antd';

const App: React.FC = () => (
  <Space size="middle">
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </Space>
);

export default App;

Alert message title

Further details about the context of this alert.

Loading state：

卡片加载中

可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'antd';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };

  return (
    <div>
      <Spin spinning={loading}>
        <Alert
          message="Alert message title"
          description="Further details about the context of this alert."
          type="info"
        />
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state：
        <Switch checked={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;

Alert message title

Further details about the context of this alert.

Loading state：

延迟

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'antd';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };
  const container = (
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  );

  return (
    <div>
      <Spin spinning={loading} delay={500}>
        {container}
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state：
        <Switch checked={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;

API

参数	说明	类型	默认值
delay	延迟显示加载效果的时间（防止闪烁）	number (毫秒)	-
indicator	加载指示符	ReactNode	-
size	组件大小，可选值为 `small` `default` `large`	string	`default`
spinning	是否为加载中状态	boolean	true
tip	当作为包裹元素时，可以自定义描述文案	ReactNode	-
wrapperClassName	包装器的类属性	string	-

静态方法

Spin.setDefaultIndicator(indicator: ReactNode)
你可以自定义全局默认 Spin 的元素。

import React from 'react'; import { Alert, Space, Spin } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Space> <Spin tip="Loading" size="small"> <div className="content" /> </Spin> <Spin tip="Loading"> <div className="content" /> </Spin> <Spin tip="Loading" size="large"> <div className="content" /> </Spin> </Space> <Spin tip="Loading..."> <Alert message="Alert message title" description="Further details about the context of this alert." type="info" /> </Spin> </Space> ); export default App;

import React from 'react'; import { LoadingOutlined } from '@ant-design/icons'; import { Spin } from 'antd'; const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />; const App: React.FC = () => <Spin indicator={antIcon} />; export default App;

import React from 'react'; import { Space, Spin } from 'antd'; const App: React.FC = () => ( <Space size="middle"> <Spin size="small" /> <Spin /> <Spin size="large" /> </Space> ); export default App;

import React, { useState } from 'react'; import { Alert, Spin, Switch } from 'antd'; const App: React.FC = () => { const [loading, setLoading] = useState(false); const toggle = (checked: boolean) => { setLoading(checked); }; return ( <div> <Spin spinning={loading}> <Alert message="Alert message title" description="Further details about the context of this alert." type="info" /> </Spin> <div style={{ marginTop: 16 }}> Loading state： <Switch checked={loading} onChange={toggle} /> </div> </div> ); }; export default App;

import React, { useState } from 'react'; import { Alert, Spin, Switch } from 'antd'; const App: React.FC = () => { const [loading, setLoading] = useState(false); const toggle = (checked: boolean) => { setLoading(checked); }; const container = ( <Alert message="Alert message title" description="Further details about the context of this alert." type="info" /> ); return ( <div> <Spin spinning={loading} delay={500}> {container} </Spin> <div style={{ marginTop: 16 }}> Loading state： <Switch checked={loading} onChange={toggle} /> </div> </div> ); }; export default App;

API

参数	说明	类型	默认值
delay	延迟显示加载效果的时间（防止闪烁）	number (毫秒)	-
indicator	加载指示符	ReactNode	-
size	组件大小，可选值为 `small` `default` `large`	string	`default`
spinning	是否为加载中状态	boolean	true
tip	当作为包裹元素时，可以自定义描述文案	ReactNode	-
wrapperClassName	包装器的类属性	string	-

静态方法

Spin.setDefaultIndicator(indicator: ReactNode)

你可以自定义全局默认 Spin 的元素。

Ant Design

Spin加载中

Ant Design

Spin加载中

何时使用

代码演示

API

静态方法

何时使用

代码演示

API

静态方法