当前位置：歪迪资源屋 > WordPress资源 > wordpress技巧 >

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

2019-01-29 wordpress技巧 743 0
歪迪资源屋有话要说：大锅 本站免费分享的资源均来自网络，如有侵权及其他事宜请点击联系我们处理

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

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

添加方法

第一步

创建一个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)
赞 1
如果文章内容或图片资源失效或者您对文章有异议，请留言反馈或点击右下角邮件图标发送邮件说明情况，我们会及时处理，谢谢！

限量领取：歪分享资源屋一直在用的服务器，阿里云的服务，不用解释，最近搞活动，领券购买超级实惠，先到先得！

  • 电信光猫TEWA-700G获取超级密码及改桥接方法（不影响IPTV和电话的使用）
    最近刚安装了电信宽带，电信带的光猫有WiFi功能，虽然方便了维护人员和没有路由器的用户，但是送的光猫硬件配置就摆在那儿，性能较弱，且扩展功能基本为零，不能实现ddns、端口转发等功能，所以最好将光猫的拨号和WiFi功能交给路由器，光猫只负责...
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章，完美的与主题结构融合，与主题列表的展现形式一模一样，不用去额外的改变任何结构！而且可以一键无痕的将发布的任何文章变成广告跳转文章！ 实现过程非常简单，利用了...
  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候，一些文章或页面没必要始终展示，比如公告，活动，广告等，但是对于像我一样的懒人们又不想拐回去关闭文章，或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单，功能也够强大，可以为文章或者...
  • 代码实现网站外链自动转换为内链
    实现步骤： 首先复制以下代码，添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • PHP输入密码才能访问这个页面的代码
    给任意php页面增加一个密码保护，需要输入正确密码才能访问 <html> <head> <title>title</title </head> <body> 输入密码才能访问...
  • official多用途企业门户官网类WordPress主题自适应wordpress企业主题
    official多用途企业门户官网类WordPress主题WordPress企业主题是由歪主题出品的一款比较简洁实用非常简单的一款wordpress企业类型主题，主题虽然包含多项设置选项，但真正需要设置的很少很少，所以无论你有无经验都可以轻...
  • DUX主题文章页相关推荐双栏显示
    DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题，响应式布局，不同设备不同展示效果，简洁大气  ，多设备支持、优化SEO，适用于垂直站点、科技博客、个人站，目前我站点使用的就是DUX主题，作为一个喜欢折...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多，但是有很多代码似乎已经不可用，而另一些虽然可用但是前端显示效果不怎么美观，于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的，实现方式虽然简单但是前端显示效果确实不错，官方给出的调用方式也极其简单，通过下面两行代码调用： <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码！！！">插入...
  • 五个步骤提升你的WordPress安全等级
    我敢肯定你周围肯定有关于WordPress安全的小故事，或者是数据库被入侵，或者是网站被挂马，甚至整个网站都没了。因此，是非常有必要地针对WordPress执行一些安全措施，尽可能降低WordPress因漏洞而被黑客做手脚。 如何提高你的W...
  • 七大免费WordPress画廊相册插件
    如果你正在准备建立一个以图片为主的WordPress博客，你可能需要考虑图片展示的问题。如果直接平铺一张张展示，貌似显得有点乏味，且会将页面拉得很长。WordPress自带的相册功能，有比较单一。 So，今天的主题是图片和图片相册。事不宜迟...

评论 抢沙发

取消换名


歪主题

WordPress建站服务

歪主题为您提供专业的wordpress建站及建站周边服务...

售后服务 技术咨询 业务咨询

随机显示一些文章

最新文章

置顶推荐

歪迪资源屋

关注公众号

关注歪迪资源屋公众号

40442584@qq.com

本站资源来自互联网

QQ客服意见反馈

在线工具歪主题广告 网站地图

©2018 歪迪资源屋 - 歪迪更懂你！

歪主题提供支持

这里写点啥？

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

支付宝扫一扫打赏

微信扫一扫打赏