首先全站引入jquery

我用的是百度公共jquery库地址

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js
"></script>

样式1

1.jpg

在style.CSS添加代码

/** 「載入中」動畫 **/
#circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(10,10,10,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #808080;
    z-index:1000;
    width:50px;
    height:50px;
        margin:0 auto;       
    position:fixed;
        left:30px;
        bottom:30px;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite ease-in-out;
    -o-animation:spinPulse 1s infinite ease-in-out;
    -ms-animation:spinPulse 1s infinite ease-in-out;
}
#circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(20,20,20,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #202020; 
    z-index:1000;
    width:30px;
    height:30px;
        margin:0 auto;
        position:fixed;
        left:40px;
        bottom:40px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
    -o-animation:spinoffPulse 1s infinite linear;
    -ms-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
    0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -o-transform:rotate(145deg); opacity:1;}
    100% { -o-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
    0% { -o-transform:rotate(0deg); }
    100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
    0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
    50% { -ms-transform:rotate(145deg); opacity:1;}
    100% { -ms-transform:rotate(-320deg); opacity:0; }
}
@-ms-keyframes spinoffPulse {
    0% { -ms-transform:rotate(0deg); }
    100% { -ms-transform:rotate(360deg); }
}

在主题内的「页首(header.php)」文件的<body>后添加显示代码

<div id="circle"></div><div id="circle1"></div>

在「页尾(footer.php)」内的前添加下列代码

<script>
jQuery(window).load(function() {
    jQuery("#circle").fadeOut(500);
    jQuery("#circle1").fadeOut(700);
});
</script>

样式2

QQ截图20160826132838.jpg

在style.CSS添加代码

#loading {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    font-size: 14px;
    line-height: 20px
}

#loading-one {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 50px 0 0 -80px;
    padding: 3px 10px
}

.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: -25px;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
    position: absolute;
    top: 50%;
    left: 50%
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: -15px;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
    position: absolute;
    top: 50%;
    left: 50%
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

在主题内的「页首(header.php)」文件的<body>后添加显示代码

　<div id="loading"> <p id="loading-one">一日博客努力载入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script>
jQuery(function() {
    jQuery('#loading-one').empty().append('一日博客载入完成.').parent().fadeOut('slow');
    jQuery('#loading').click(function() {
        jQuery('#loading').fadeOut('slow');
    });
});
</script>

样式3

QQ截图20160901221237.jpg

在style.CSS添加代码

#loading {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    font-size: 14px;
    line-height: 20px
}
#loading-one {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 50px 0 0 -80px;
    padding: 3px 10px
}
.spinner {
    position: absolute;
margin-right: 500px;
    top: 50%;
    left: 50%;
  width: 50px;
  height: 60px;
    margin: 0 0 0 -20px;
  font-size: 10px;
}
 
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

在主题内的「页首(header.php)」文件的<body>后添加显示代码

<div id="loading">
<div id="loading-one"></div>
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script>
jQuery(window).load(function() {
    jQuery("#loading").fadeOut(500);
});
</script>

代码实现

其实很简单，核心代码是最后一段的jQuery

jQuery("#loading").fadeOut(500);

表示加载完成后，0.5s 淡出这个效果。

文章来源

给WordPress添加「加载中」动画
如何在wordpress博客中添加炫酷的加载中动画特效
使用 CSS3 实现超炫的 Loading（加载）动画效果

最后修改：2019 年 02 月 26 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。