react表格加载之前如何实现loading

最新推荐文章于 2025-04-25 07:42:10 发布

I NFINIT Y

最新推荐文章于 2025-04-25 07:42:10 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： loading react

本文链接：https://blog.csdn.net/weixin_43021174/article/details/85488952

本文介绍了如何在React应用中实现全局的loading效果。通过在public/index.html中添加loading的DOM元素，并在style目录下创建loading.less，配合common.less导入样式。在发送请求前展示loading，请求完成后隐藏，实现优雅的加载体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将下面代码复制到public/index.html文件里面，将它变成全局的html文件，这样已经生成了全局的dom

<div class="ajax-loading" id="ajaxLoading" style="display: none;">
      <div class="overlay"></div>
      <div class="loading">
        <img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" alt="">
        <span>加载中，请稍后...</span>
      </div>
    </div>

在style目录下面创建loading.less文件，在common.less文件中导入loading.less文件

/** load **/
.ajax-loading{
  display: none;
  .loading{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding:0 40px;
    height: 80px;
    line-height: 80px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 6px;
    text-align: center;
    z-index: 9999;
    font-size:@fontD;
    color:#fff;
    img{
      width: 32px;
      vertical-align: middle;
    }
    span{
      margin-left:12px;
    }
  }
  .overlay{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9998;
    background: rgb(255, 255, 255);
    opacity: 0.1;
  }
}

/****/

在请求接口之前让他显示，请求完成之后让它隐藏

 document.getElementById('ajaxLoading').style.display = 'block';