原生table添加正在加载中的css样式_<table>设置加载中-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40974235/article/details/110071063

这段代码展示了如何使用HTML、CSS和JavaScript实现一个加载效果和表格数据的Ajax查询。当调用`queryTableData`函数时，会显示加载效果，然后通过Ajax向'/queryTableData'发送POST请求获取数据。请求成功后，隐藏加载效果并显示表格数据。

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

1.效果图

在这里插入图片描述

2.html代码

<div class="grad-cont">
     <div class="app-grad">
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
         <div id="gradActive" style="width: 1200px;height:450px"></div>
     </div>
     <div class="app-table mt20" style="display: none">
         <div class="tolexport clearfix">
              <button class="expbtn fr" id="exportExcel"><span>导出所选数据</span></button>
         </div>
         <div class="mt20" id="loadding" style="width:1160px; height:400px; overflow:auto;">
             <table id="rank-table2" lay-filter="test" style="text-align:center">
	             <thead id="tableHeader">
	             </thead>
	             <tbody id="tableBody" style="overflow: auto">
	             </tbody>
             </table>
         </div>
     </div>
     <div class="loadEffect">
        <div class="loader"></div>
            <p>加载中请稍后...</p>
        </div>
     </div>
</div>

3.css代码

<style>
    .loadEffect{padding:20px 0;text-align:center;}
    .loadEffect p{display:inline-block;position:relative;top:-30px;padding-left:15px;font-size:14px;color:#0fa4f6;}
    .loadEffect .loader{display:inline-block;font-size:30px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:0.8em auto;position:relative;-webkit-animation:load 1.7s infinite ease;animation:load 2s infinite ease;}
    @-webkit-keyframes load{
        0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
        5%,
        95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em #a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
        30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
        55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
        100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    }
    @keyframes load{
        0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #d4eaf4,-0.11em -0.83em 0 -0.42em #d4eaf4,-0.11em -0.83em 0 -0.44em #d4eaf4,-0.11em -0.83em 0 -0.46em #d4eaf4,-0.11em -0.83em 0 -0.477em #d4eaf4;}
        5%,
        95%{box-shadow:-0.11em -0.83em 0 -0.4em #a4dbf4,-0.11em -0.83em 0 -0.42em #a4dbf4,-0.11em -0.83em 0 -0.44em #a4dbf4,-0.11em -0.83em 0 -0.46em #a4dbf4,-0.11em -0.83em 0 -0.477em #a4dbf4;}
        30%{box-shadow:-0.11em -0.83em 0 -0.4em #5bc5f4,-0.51em -0.66em 0 -0.42em #5bc5f4,-0.75em -0.36em 0 -0.44em #5bc5f4,-0.83em -0.03em 0 -0.46em #5bc5f4,-0.81em 0.21em 0 -0.477em #5bc5f4;}
        55%{box-shadow:-0.11em -0.83em 0 -0.4em #2ab6f4,-0.29em -0.78em 0 -0.42em #2ab6f4,-0.43em -0.72em 0 -0.44em #2ab6f4,-0.52em -0.65em 0 -0.46em #2ab6f4,-0.57em -0.61em 0 -0.477em #2ab6f4;}
        100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    }
</style>

4.js代码

function queryTableData(params){
    $(".loadEffect").show();
    $(".app-table").hide();
    $.ajax({
      url: '/queryTableData',
      data: JSON.stringify(params),
      contentType: 'application/json;charset=UTF-8',
      type: 'post',
      success: function (res) {
        //请求成功隐藏加载效果
        $(".loadEffect").hide();
        //请求成功展现表格数据
        $(".app-table").show();
        if (res.code !== 200) {
          return;
        }
        //renderTableData(res.data);
      }
    })
  }