Wordpress添加预加载动画（非插件）

首先先回答为什么不使用插件？
其实wordpress提供了许多预加载动画的插件，但是在实际使用时发现偶尔会出现页面部分内容先于加载动画出现，导致观感不好，遂决定采用直接修改主题文件的方式，避免这种情况的发生。

因为我使用了主题，所以这里打开wp-content/themes/argon下的header.php

在body标签后添加以下内容

  <style>
    .loading-animations {
        background: #666;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        transition: 1s;
        opacity: 1;
    }

    .loading-animations-out {
         opacity: 0;
    }
</style>
<div class="loading-animations" id="loading-warp"></div>

HTML

该css内容是使页面出现一个白色的页面，与以下的js相配合，实现在页面加载完成后淡出。

<script>
 window.addEventListener('load', function () {
        let loader = document.getElementById("loading-warp");
        loader.className = "loading-animations loading-animations-out";
        setTimeout(() => {
            loader.style.display = "none"
        }, 1000);
    });
</script>

HTML

以上，简单的实现了白色的加载动画。但是这样难免过于单调，可以在https://css-loaders.com/挑选自己喜欢的动画，并将css添加在style标签内，将div添加在<div class=”loading-animations” id=”loading”>之中，如本站的加载动画完整代码如下（经过简单的压缩，但本质不变）

<!--加载动画开始-->
<style>
.loading-animations{background:#FFF;position:fixed;left:0;right:0;top:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;transition:1s;opacity:1}
.loading-animations-out{opacity:0}
.loader{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;width:175px;height:100px}
.loader span{display:block;width:7px;height:100%;border-radius:14px;margin-right:5px;float:left}
.loader span:last-child{margin-right:0px}
.loader span:nth-child(1){animation:load 2.5s 1.4s infinite linear}
.loader span:nth-child(2){animation:load 2.5s 1.2s infinite linear}
.loader span:nth-child(3){animation:load 2.5s 1s infinite linear}
.loader span:nth-child(4){animation:load 2.5s 0.8s infinite linear}
.loader span:nth-child(5){animation:load 2.5s 0.6s infinite linear}
.loader span:nth-child(6){animation:load 2.5s 0.4s infinite linear}
.loader span:nth-child(7){animation:load 2.5s 0.2s infinite linear}
.loader span:nth-child(8){animation:load 2.5s 0s infinite linear}
.loader span:nth-child(9){animation:load 2.5s 0.2s infinite linear}
.loader span:nth-child(10){animation:load 2.5s 0.4s infinite linear}
.loader span:nth-child(11){animation:load 2.5s 0.6s infinite linear}
.loader span:nth-child(12){animation:load 2.5s 0.8s infinite linear}
.loader span:nth-child(13){animation:load 2.5s 1s infinite linear}
.loader span:nth-child(14){animation:load 2.5s 1.2s infinite linear}
.loader span:nth-child(15){animation:load 2.5s 1.4s infinite linear}
@keyframes load{0%{background:#c8977c;transform:scaleY(0.08)}
50%{background:#e1ae93;transform:scaleY(1)}
100%{background:#c8977c;transform:scaleY(0.08)}
}
</style>
<script>
window.addEventListener('load',function(){let loader=document.getElementById("loading-warp");loader.className="loading-animations loading-animations-out";setTimeout(()=>{loader.style.display="none"},1000)});
</script>
<div class="loading-animations" id="loading-warp">
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<!--加载动画结束-->

HTML

代码出处：https://www.lovestu.com/loading-animation.html

分享一下

评论

发送评论编辑评论

评论

发送评论 编辑评论

发送评论编辑评论