为你的网站添加加载动画

效果图

首先需要准备一个循环的动画图片（GIF），没有的我提供一个早稻姬的

找到header.php文件，再body后面加入以下代码

<div class="loader" style="flex-direction: column;color: #f77b90;"><img src="https://cos.uocin.com/wp-content/uploads/2023/11/20231104073127417.gif" alt="loader"><br>Loading···</div>

然后添加css和js

css

.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFF;
    z-index: 99;
    opacity: 1; /* 初始透明度为1（完全不透明） */
    transition: opacity 0.5s, z-index 0.5s; /* 添加过渡效果，时长为1秒 */
}
.loader.hidden {
    opacity: 0; /* 当添加.hidden类时，透明度变为0 */
    z-index: 0; /* 同时将z-index设置为0 */
}
.loader>img {
    height: 96px;/*根据自身需求修改图片大小*/
}

JS

因为加载好就隐藏很突兀，所以搞了延迟0.5秒隐藏，具体效果类似淡入淡出