import React from 'react'; import { Spin } from '@douyinfe/semi-ui'; () => ( <div style={{ marginLeft: 30 }}> <div style={{ marginBottom: 10 }}>A basic spin.</div> <Spin /> </div> );

import React from 'react'; import { Spin } from '@douyinfe/semi-ui'; () => ( <div style={{ marginLeft: 30 }}> <div style={{ marginBottom: 5 }}>size: small</div> <Spin size="small" /> <br /> <br /> <div style={{ marginBottom: 10 }}>size: middle</div> <Spin size="middle" /> <br /> <br /> <div style={{ marginBottom: 15 }}>size: large</div> <Spin size="large" /> </div> );

import React from 'react'; import { Spin } from '@douyinfe/semi-ui'; () => ( <div> <Spin tip="I am loading..."> <div style={{ border: '1px solid var(--semi-color-primary)', borderRadius: '4px', paddingLeft: '8px', }} > <p>Here are some texts.</p> <p>And more texts on the way.</p> </div> </Spin> </div> );

import React from 'react'; import { Spin } from '@douyinfe/semi-ui'; import { IconLoading } from '@douyinfe/semi-icons'; () => ( <div style={{ marginLeft: 30 }}> <div>A spin with customized indicator.</div> <Spin indicator={<IconLoading />} /> </div> );

import React, { useState } from 'react'; import { Spin, Button } from '@douyinfe/semi-ui'; () => { const [loading, toggleLoading] = useState(false); const toggle = () => { toggleLoading(!loading); }; return ( <div> <Button onClick={toggle} style={{ marginRight: 20 }}> Delayed spin </Button> <Spin delay={1000} spinning={loading}></Spin> </div> ); };

import React, { useState } from 'react'; import { Spin, Button } from '@douyinfe/semi-ui'; () => { const [loading, toggleLoading] = useState(false); const toggle = () => { toggleLoading(!loading); }; return ( <div> <Button onClick={toggle} style={{ marginRight: 20 }}> Controlled Spin </Button> <Spin spinning={loading}></Spin> </div> ); };