Spin加载中
用于页面和区块的加载中状态。
何时使用#
页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
代码演示
TypeScript
JavaScript
import { Spin } from 'infrad';
import React from 'react';
const App: React.FC = () => <Spin />;
export default App;
TypeScript
JavaScript
import { Spin } from 'infrad';
import React from 'react';
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;
}
Loading...
TypeScript
JavaScript
import { Alert, Spin } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Spin tip="Loading...">
<Alert
message="Alert message title"
description="Further details about the context of this alert."
type="info"
/>
</Spin>
);
export default App;
TypeScript
JavaScript
import { LoadingOutlined } from 'infra-design-icons';
import { Spin } from 'infrad';
import React from 'react';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const App: React.FC = () => <Spin indicator={antIcon} />;
export default App;
TypeScript
JavaScript
import { Space, Spin } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Space size="middle">
<Spin size="small" />
<Spin />
<Spin size="large" />
</Space>
);
export default App;
Loading state:
TypeScript
JavaScript
import { Alert, Spin, Switch } from 'infrad';
import React, { useState } from 'react';
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;
Loading state:
TypeScript
JavaScript
import { Alert, Spin, Switch } from 'infrad';
import React, { useState } from 'react';
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 的元素。