【React】使用 antd 加载组件实现 iframe 的加载效果

文章目录

  • 代码实现:
import { Spin } from 'antd';
import { useState } from 'react';

export default function () {
  const [loading, setLoading] = useState(true);
  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <Spin
        style={{ position: 'absolute', marginLeft: '40vw', marginTop: '40vh' }}
        spinning={loading}
        tip="加载页面资源中..."
      />
      <iframe
        src={url}
        allow="fullscreen"
        onLoad={() => {
          setLoading(false);
        }}
        style={{
          height: '100%',
          width: '100%',
          border: 'none',
        }}
      />
    </div>
  );
}

相关推荐

  1. React使用 antd 组件实现 iframe 效果

    2024-07-19 18:52:01       23 阅读
  2. ReactReact组件lazy和Suspense

    2024-07-19 18:52:01       28 阅读
  3. React

    2024-07-19 18:52:01       41 阅读
  4. React实现虚拟滚动

    2024-07-19 18:52:01       48 阅读
  5. vue 异步组件

    2024-07-19 18:52:01       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-19 18:52:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-19 18:52:01       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-19 18:52:01       58 阅读
  4. Python语言-面向对象

    2024-07-19 18:52:01       69 阅读

热门阅读

  1. 初步认识HTML

    2024-07-19 18:52:01       20 阅读
  2. Spring中用了哪些设计模式?

    2024-07-19 18:52:01       18 阅读
  3. 常见日志报错及解决方法

    2024-07-19 18:52:01       18 阅读
  4. OpenSNN推文:目前在哪些方面AI能完全取代人类

    2024-07-19 18:52:01       16 阅读
  5. 面试问题:React基本概念,和所遇到的CPU和IO问题

    2024-07-19 18:52:01       19 阅读
  6. Linux处理文件sed

    2024-07-19 18:52:01       19 阅读
  7. Hadoop基础组件介绍!

    2024-07-19 18:52:01       19 阅读
  8. Android 14 适配之 - 全屏 intent 通知

    2024-07-19 18:52:01       19 阅读
  9. Vector容器笔记

    2024-07-19 18:52:01       19 阅读
  10. HashMap的putVal方法(源码分析)

    2024-07-19 18:52:01       24 阅读
  11. 周报 | 24.7.8-24.7.14文章汇总

    2024-07-19 18:52:01       23 阅读