css 制作一个 加载中 动画

---

html 代码 

<div id="loader" style="display: none;" >

    <section>
        <div class="loader">
            <span style="--i:1"></span>
            <span style="--i:2;"></span>
            <span style="--i:3;"></span>
            <span style="--i:4;"></span>
            <span style="--i:5;"></span>
            <span style="--i:6;"></span>
            <span style="--i:7;"></span>
            <span style="--i:8;"></span>
            <span style="--i:9;"></span>
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>
    </section>
</div>

---

js 、 Jq 调试 显示 隐藏就可以了

这里使用的 jq 的方法 

$("#loader").fadeIn("slow")   // 显示 

$("#loader").fadeOut("slow")   // 隐藏 

---

创建 一个 css 文件   load.css  文件名  然后在 使用 加载动画中 进行引入 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#loader{

}
section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
     /*background: #FFFFFF;*/
    animation: animateBackground 10s linear infinite;
    z-index: 99999;
    position: fixed;
    left: 45%;
    top: -5%;
}
/* 变色 */
@keyframes animateBackground {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

section .loader {
    position: relative;
    width: 120px;
    height: 120px;
}

section .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    background: #00d5ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d5ff,
    0 0 20px #00d5ff,
    0 0 40px #00d5ff,
    0 0 80px #00d5ff,
    0 0 100px #00d5ff;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
    0% {
        transform: scale(1);
    }
    80%,100% {
        transform: scale(0);
    }
}

body {
    background-color: #FFFFFF;
}

.layui-laydate .layui-this {
    background-color: #1E9FFF !important;
    color: #fff !important;
}

.layui-form-select dl dd.layui-this {
    background-color: #1E9FFF;
    color: #fff;
}

.div-button-1 {
    position: relative;
    left: 55rem;
    top: -6rem;
}

.div-button-1 > button {
    border-radius: 10px;
    /*color: #0C0C0C;*/
}

hr {
    width: 100%;
    position: fixed;
    top: 8rem;
    /*background-color: #0C0C0C;*/
}

.layui-table-box {
    height: 450px;
}

.layui-table-body {
    height: 420px;
}
.layui-table-page select {
    height: 26px;
}
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

::-webkit-scrollbar-track {
    width: 2px;
    background-color: #ffffff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/*滚动条的设置*/

::-webkit-scrollbar-thumb {
    background-color: #464949;
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/*滚动条移上去的背景*/

::-webkit-scrollbar-thumb:hover {
    background-color: #fff;
}