wordpress给你的网页添加一个加载动画

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。

添加方法

第一步

创建一个css文件,可以命名为loader.css,将其放到网站目录下合适的位置(比如/wp-content/themes/你的主题/css/loader.css)CSS内容如下

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;}
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:999999;}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* COLOR 1 */
    border-top-color: #FFF;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */   
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index:1001;}
#loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        /* COLOR 2 */       
        border-top-color: #FFF;
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */              
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FFF;
        /* COLOR 3 */       
        -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
 
 
@-webkit-keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }100%{
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}
 
@keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }100%{
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
}
 
 
#loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #23282d; /* Old browsers */
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}
 
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;}
.loaded #loader-wrapper {
        visibility: hidden;
        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;}
/* JavaScript Turned Off */
.no-js #loader-wrapper {display: none;}
.no-js h1 {color: #222222;}
#loader-wrapper .load_title {
    font-family:'Open Sans';
    color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}

第二部

修改header.php


如果想要全站添加加载动画(每个页面都显示加载动画),请在</head>前添加以下内容(第二行的CSS链接请自行修改适配为上面第一步你存放的位置)

<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/loader.css">
 
<script type="text/javascript">         
    // 等待所有加载
    $(window).load(function(){
        $('body').addClass('loaded');
        $('#loader-wrapper .load_title').remove();
    }); 
</script>    
 
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">第一行文字<br>
                      <span>第二行文字</span>
</div>
</div>
<!--页面加载end-->

如果想要只在主页显示加载动画,请在<body>下添加以下内容(第三行的CSS链接请自行修改适配为上面第一步你存放的位置)

<?php if (is_home()) { ?>
<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/loader.css">
 
<script type="text/javascript">         
    // 等待所有加载
    $(window).load(function(){
        $('body').addClass('loaded');
        $('#loader-wrapper .load_title').remove();
    }); 
</script>    
 
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">第一行文字<br>
                      <span>第二行文字</span>
</div>
</div>
<!--页面加载end-->
<?php } ?>

注意

如果您的网站多多少少有一些优化,页面打开速度应该都不会太慢(几乎都是不到1秒钟的事),所以看个人需求使用。

加载动画会在页面加载完后动态消失,所以如果你的站点有异步加载等内容,请酌情使用。

建议只在主页使用,毕竟挺好(zhuang)看(bi)的。^_^

另外,JS内容可以移到底部。

这篇文章如果帮到了你 打赏
分享到: 更多 (0)
3
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • 一淘app输入一淘邀请码领取奖励登录送8元新人大礼包奖励(8元=800集分宝)
    礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【】即可领取8元礼金券,说明一下这个红包码其实就是一个推荐码必需要输入,不输入邀请码一淘不给赠送8元的礼金券,输...
  • VMware Workstation 15 Pro 官方简体中文专业版 + 永久激活密钥
    VMware Workstation 15 Pro 官方简体中文专业版 永久激活密钥 系统要求 支持使用 2011 年或更晚发布的处理器 (CPU) 的系统,但以下系统除外: 使用基于 2011 年 Bonnell 微架构的 Intel A...
  • 通过Hosts或科学流畅访问谷歌、推特等网站
    通过 Hosts 进行科学上网算是“最原生态”的方法了,不需要任何软件,只要更改一个文件,就能实现,可谓既高效又方便,但hosts目前来说几乎已经无法使用了,只能选择一款稳定长期的服务商来实现了,本文推荐两款绝对牛掰的服务 一、首先给出ho...
  • 一淘邀请码密令是什么 怎么获取一淘礼金券 一淘返利教程
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 一淘礼金券有什么用?怎么获得一淘app礼金券的详细教程
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 使用一淘邀请码获得一淘礼金券购物返现每单还有返利 准时到账
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 一淘的礼金券 一件商品可以使用多张礼金券吗?
    不能, 一淘礼金券的使用需要单笔,系统会自动选择金额最大的礼金券抵扣,不可以使用多张,每笔一张。 一淘礼金券返回是以集分宝形式返还在支付宝,需要确认收货16天到达账户,订单页都会显示集分宝到账时间
  • sublime text 3.2.1 3207破解方法
    今天用家里的笔记本想修改一处代码,结果只有DW CC2019版本,这个版本确实有些不顺手,于是下载了官网版本的sublime text 3,各种搜索注册码,终于找到一个还是sublime text 2的勉强能用,但我这样的完美主义者哈哈实在...
  • 一淘APP的新人邀请码是什么?
    一淘网是阿里巴巴旗下官方促销导购平台,通过超高返利、大额红包、超值优惠券等丰富的利益点,为用户提供高性价比的品牌好货,是必不可少的网购省钱利器。 最近一淘APP针对新人有不少的福利,新注册的用户都可以凭下图中的邀请码领取新人专享免单商品,下...
  • 怎么获得一淘礼金券 一淘邀请码:JAG42
    怎么获得一淘礼金券 一淘邀请码:JAG42,一淘app新用户注册领取8元新人大礼包奖励(800集分宝=8元) 礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【...
  • 如何领一淘新人福利 一淘邀请码及详细操作步骤
    礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【】即可领取8元礼金券,说明一下这个红包码其实就是一个推荐码必需要输入,不输入一淘不给赠送8元的礼金券,输入后点...
  • 电信光猫TEWA-700G获取超级密码及改桥接方法(不影响IPTV和电话的使用)
    最近刚安装了电信宽带,电信带的光猫有WiFi功能,虽然方便了维护人员和没有路由器的用户,但是送的光猫硬件配置就摆在那儿,性能较弱,且扩展功能基本为零,不能实现ddns、端口转发等功能,所以最好将光猫的拨号和WiFi功能交给路由器,光猫只负责...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏