Loading 加载中

使用场景

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

示例

基本示例

盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。
盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。
盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。

noInline

const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; const Content = () => ( <> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> </> ); function Basic() { return ( <Loading visible> <div style={{ minHeight: 400, fontSize: 16, lineHeight: 1.5, background: 'var(--rex-colors-emphasis-20)' }}> <Content /> </div> </Loading> ); } render(<Basic />)

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

const Content = () => (
  <>
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
  </>
);

function Basic() {
  return (
    <Loading visible>
      <div style={{ minHeight: 400, fontSize: 16, lineHeight: 1.5, background: 'var(--rex-colors-emphasis-20)' }}>
        <Content />
      </div>
    </Loading>
  );
}

render(<Basic />)

受控用法

可见：

显示

隐藏

尺寸：

中尺寸

大尺寸

盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。
盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。
盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。

noInline

const hippoIntroduction = '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。'; const Content = () => ( <> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> {hippoIntroduction} {hippoIntroduction} {hippoIntroduction} <br /> </> ); function Controlled() { const [size, setSize] = useState('large'); const [visible, setVisible] = useState(true); return ( <div> <Flex alignItems="center"> 可见： <RadioGroup dataSource={[ { value: 'true', label: '显示' }, { value: 'false', label: '隐藏' }, ]} value={String(visible)} onChange={(s) => setVisible(s === 'true')} /> </Flex> <Flex alignItems="center"> 尺寸： <RadioGroup dataSource={[ { value: 'median', label: '中尺寸' }, { value: 'large', label: '大尺寸' }, ]} value={size} onChange={setSize} /> </Flex> <Loading visible={visible} size={size }> <div style={{ minHeight: 400, fontSize: 16, lineHeight: 1.5, background: 'var(--rex-colors-emphasis-20)' }}> <Content /> </div> </Loading> </div> ); } render(<Controlled />)

const hippoIntroduction =
  '盒马是阿里巴巴集团旗下，以数据和技术驱动的新零售平台。盒马希望为消费者打造社区化的一站式新零售体验中心，用科技和人情味带给人们“鲜美生活”。';

const Content = () => (
  <>
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
    {hippoIntroduction}
    {hippoIntroduction}
    {hippoIntroduction}
    <br />
  </>
);

function Controlled() {
  const [size, setSize] = useState('large');
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <Flex alignItems="center">
        可见：
        <RadioGroup
          dataSource={[
            { value: 'true', label: '显示' },
            { value: 'false', label: '隐藏' },
          ]}
          value={String(visible)}
          onChange={(s) => setVisible(s === 'true')}
        />
      </Flex>
      <Flex alignItems="center">
        尺寸：
        <RadioGroup
          dataSource={[
            { value: 'median', label: '中尺寸' },
            { value: 'large', label: '大尺寸' },
          ]}
          value={size}
          onChange={setSize}
        />
      </Flex>

      <Loading visible={visible} size={size }>
        <div style={{ minHeight: 400, fontSize: 16, lineHeight: 1.5, background: 'var(--rex-colors-emphasis-20)' }}>
          <Content />
        </div>
      </Loading>
    </div>
  );
}

render(<Controlled />)

API

字段	描述
className	string
visible	boolean loading 状态, 默认 true
size	"large" | "median" 动画尺寸，可选值为 'large' 或 'medium'