预加载器为当前主题的部分内容wp
问题描述:
我需要仅在'content'div中显示预加载器,但是预加载器隐藏整个页面。结构部位:预加载器为当前主题的部分内容wp
- 标题
- 菜单
- 内容(这里我需要预装)
- 页脚
我找不到,我哪里需要插入我的预加载的代码.. 。
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
\t $(window).load(function() {
\t $(".cssload-loader").delay(1400).fadeOut();
\t $(".preloader").delay(1500).fadeOut("slow");
\t })
.preloader {
position: fixed;
background-color: #fff;
z-index: 107;
height: 100%;
width: 100%;
}
.cssload-loader {
\t position: absolute;
\t left: 50%;
\t top: 50%;
\t width: 34.284271247462px;
\t height: 34.284271247462px;
\t margin-left: -17.142135623731px;
\t margin-top: -17.142135623731px;
\t border-radius: 100%;
\t animation-name: cssload-loader;
\t \t -o-animation-name: cssload-loader;
\t \t -ms-animation-name: cssload-loader;
\t \t -webkit-animation-name: cssload-loader;
\t \t -moz-animation-name: cssload-loader;
\t animation-iteration-count: infinite;
\t \t -o-animation-iteration-count: infinite;
\t \t -ms-animation-iteration-count: infinite;
\t \t -webkit-animation-iteration-count: infinite;
\t \t -moz-animation-iteration-count: infinite;
\t animation-timing-function: linear;
\t \t -o-animation-timing-function: linear;
\t \t -ms-animation-timing-function: linear;
\t \t -webkit-animation-timing-function: linear;
\t \t -moz-animation-timing-function: linear;
\t animation-duration: 2.8s;
\t \t -o-animation-duration: 2.8s;
\t \t -ms-animation-duration: 2.8s;
\t \t -webkit-animation-duration: 2.8s;
\t \t -moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
\t display: block;
\t width: 4px;
\t height: 14px;
\t background-color: rgba(0,0,0,0.81);
\t margin: 1px;
\t position: absolute;
\t border-radius: 50%;
\t animation-duration: 1.045s;
\t \t -o-animation-duration: 1.045s;
\t \t -ms-animation-duration: 1.045s;
\t \t -webkit-animation-duration: 1.045s;
\t \t -moz-animation-duration: 1.045s;
\t animation-iteration-count: infinite;
\t \t -o-animation-iteration-count: infinite;
\t \t -ms-animation-iteration-count: infinite;
\t \t -webkit-animation-iteration-count: infinite;
\t \t -moz-animation-iteration-count: infinite;
\t animation-timing-function: ease;
\t \t -o-animation-timing-function: ease;
\t \t -ms-animation-timing-function: ease;
\t \t -webkit-animation-timing-function: ease;
\t \t -moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
\t transform: rotate(0deg);
\t \t -o-transform: rotate(0deg);
\t \t -ms-transform: rotate(0deg);
\t \t -webkit-transform: rotate(0deg);
\t \t -moz-transform: rotate(0deg);
\t animation-name: cssload-rotate0;
\t \t -o-animation-name: cssload-rotate0;
\t \t -ms-animation-name: cssload-rotate0;
\t \t -webkit-animation-name: cssload-rotate0;
\t \t -moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
\t transform: rotate(90deg);
\t \t -o-transform: rotate(90deg);
\t \t -ms-transform: rotate(90deg);
\t \t -webkit-transform: rotate(90deg);
\t \t -moz-transform: rotate(90deg);
\t animation-name: cssload-rotate90;
\t \t -o-animation-name: cssload-rotate90;
\t \t -ms-animation-name: cssload-rotate90;
\t \t -webkit-animation-name: cssload-rotate90;
\t \t -moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
\t transform: rotate(45deg);
\t \t -o-transform: rotate(45deg);
\t \t -ms-transform: rotate(45deg);
\t \t -webkit-transform: rotate(45deg);
\t \t -moz-transform: rotate(45deg);
\t animation-name: cssload-rotate45;
\t \t -o-animation-name: cssload-rotate45;
\t \t -ms-animation-name: cssload-rotate45;
\t \t -webkit-animation-name: cssload-rotate45;
\t \t -moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
\t transform: rotate(135deg);
\t \t -o-transform: rotate(135deg);
\t \t -ms-transform: rotate(135deg);
\t \t -webkit-transform: rotate(135deg);
\t \t -moz-transform: rotate(135deg);
\t animation-name: cssload-rotate135;
\t \t -o-animation-name: cssload-rotate135;
\t \t -ms-animation-name: cssload-rotate135;
\t \t -webkit-animation-name: cssload-rotate135;
\t \t -moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
\t top: 17.142135623731px;
\t left: 34.284271247462px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
\t top: 29.213203431093px;
\t left: 29.213203431093px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
\t top: 34.284271247462px;
\t left: 17.142135623731px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
\t top: 29.213203431093px;
\t left: 5.0710678163691px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
\t top: 17.142135623731px;
\t left: 0px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
\t top: 5.0710678163691px;
\t left: 5.0710678163691px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
\t top: 0px;
\t left: 17.142135623731px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
\t top: 5.0710678163691px;
\t left: 29.213203431093px;
\t margin-left: -2px;
\t margin-top: -7px;
\t animation-delay: 0;
\t \t -o-animation-delay: 0;
\t \t -ms-animation-delay: 0;
\t \t -webkit-animation-delay: 0;
\t \t -moz-animation-delay: 0;
}
@keyframes cssload-rotate0 {
\t 0% {
\t \t transform: rotate(0deg);
\t }
\t 60% {
\t \t transform: rotate(180deg);
\t }
\t 100% {
\t \t transform: rotate(180deg);
\t }
}
@-o-keyframes cssload-rotate0 {
\t 0% {
\t \t -o-transform: rotate(0deg);
\t }
\t 60% {
\t \t -o-transform: rotate(180deg);
\t }
\t 100% {
\t \t -o-transform: rotate(180deg);
\t }
}
@-ms-keyframes cssload-rotate0 {
\t 0% {
\t \t -ms-transform: rotate(0deg);
\t }
\t 60% {
\t \t -ms-transform: rotate(180deg);
\t }
\t 100% {
\t \t -ms-transform: rotate(180deg);
\t }
}
@-webkit-keyframes cssload-rotate0 {
\t 0% {
\t \t -webkit-transform: rotate(0deg);
\t }
\t 60% {
\t \t -webkit-transform: rotate(180deg);
\t }
\t 100% {
\t \t -webkit-transform: rotate(180deg);
\t }
}
@-moz-keyframes cssload-rotate0 {
\t 0% {
\t \t -moz-transform: rotate(0deg);
\t }
\t 60% {
\t \t -moz-transform: rotate(180deg);
\t }
\t 100% {
\t \t -moz-transform: rotate(180deg);
\t }
}
@keyframes cssload-rotate90 {
\t 0% {
\t \t transform: rotate(90deg);
\t \t \t \t \t \t transform: rotate(90deg);
\t }
\t 60% {
\t \t transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
\t 100% {
\t \t transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
}
@-o-keyframes cssload-rotate90 {
\t 0% {
\t \t -o-transform: rotate(90deg);
\t \t \t \t \t \t transform: rotate(90deg);
\t }
\t 60% {
\t \t -o-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
\t 100% {
\t \t -o-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
}
@-ms-keyframes cssload-rotate90 {
\t 0% {
\t \t -ms-transform: rotate(90deg);
\t \t \t \t \t \t transform: rotate(90deg);
\t }
\t 60% {
\t \t -ms-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
\t 100% {
\t \t -ms-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
}
@-webkit-keyframes cssload-rotate90 {
\t 0% {
\t \t -webkit-transform: rotate(90deg);
\t \t \t \t \t \t transform: rotate(90deg);
\t }
\t 60% {
\t \t -webkit-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
\t 100% {
\t \t -webkit-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
}
@-moz-keyframes cssload-rotate90 {
\t 0% {
\t \t -moz-transform: rotate(90deg);
\t \t \t \t \t \t transform: rotate(90deg);
\t }
\t 60% {
\t \t -moz-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
\t 100% {
\t \t -moz-transform: rotate(270deg);
\t \t \t \t \t \t transform: rotate(270deg);
\t }
}
@keyframes cssload-rotate45 {
\t 0% {
\t \t transform: rotate(45deg);
\t \t \t \t \t \t transform: rotate(45deg);
\t }
\t 60% {
\t \t transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
\t 100% {
\t \t transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
}
@-o-keyframes cssload-rotate45 {
\t 0% {
\t \t -o-transform: rotate(45deg);
\t \t \t \t \t \t transform: rotate(45deg);
\t }
\t 60% {
\t \t -o-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
\t 100% {
\t \t -o-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
}
@-ms-keyframes cssload-rotate45 {
\t 0% {
\t \t -ms-transform: rotate(45deg);
\t \t \t \t \t \t transform: rotate(45deg);
\t }
\t 60% {
\t \t -ms-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
\t 100% {
\t \t -ms-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
}
@-webkit-keyframes cssload-rotate45 {
\t 0% {
\t \t -webkit-transform: rotate(45deg);
\t \t \t \t \t \t transform: rotate(45deg);
\t }
\t 60% {
\t \t -webkit-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
\t 100% {
\t \t -webkit-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
}
@-moz-keyframes cssload-rotate45 {
\t 0% {
\t \t -moz-transform: rotate(45deg);
\t \t \t \t \t \t transform: rotate(45deg);
\t }
\t 60% {
\t \t -moz-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
\t 100% {
\t \t -moz-transform: rotate(225deg);
\t \t \t \t \t \t transform: rotate(225deg);
\t }
}
@keyframes cssload-rotate135 {
\t 0% {
\t \t transform: rotate(135deg);
\t \t \t \t \t \t transform: rotate(135deg);
\t }
\t 60% {
\t \t transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
\t 100% {
\t \t transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
}
@-o-keyframes cssload-rotate135 {
\t 0% {
\t \t -o-transform: rotate(135deg);
\t \t \t \t \t \t transform: rotate(135deg);
\t }
\t 60% {
\t \t -o-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
\t 100% {
\t \t -o-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
}
@-ms-keyframes cssload-rotate135 {
\t 0% {
\t \t -ms-transform: rotate(135deg);
\t \t \t \t \t \t transform: rotate(135deg);
\t }
\t 60% {
\t \t -ms-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
\t 100% {
\t \t -ms-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
}
@-webkit-keyframes cssload-rotate135 {
\t 0% {
\t \t -webkit-transform: rotate(135deg);
\t \t \t \t \t \t transform: rotate(135deg);
\t }
\t 60% {
\t \t -webkit-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
\t 100% {
\t \t -webkit-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
}
@-moz-keyframes cssload-rotate135 {
\t 0% {
\t \t -moz-transform: rotate(135deg);
\t \t \t \t \t \t transform: rotate(135deg);
\t }
\t 60% {
\t \t -moz-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
\t 100% {
\t \t -moz-transform: rotate(315deg);
\t \t \t \t \t \t transform: rotate(315deg);
\t }
}
@keyframes cssload-loader {
\t 0% {
\t \t transform: rotate(0deg);
\t \t \t \t \t \t transform: rotate(0deg);
\t }
\t 100% {
\t \t transform: rotate(360deg);
\t \t \t \t \t \t transform: rotate(360deg);
\t }
}
@-o-keyframes cssload-loader {
\t 0% {
\t \t -o-transform: rotate(0deg);
\t \t \t \t \t \t transform: rotate(0deg);
\t }
\t 100% {
\t \t -o-transform: rotate(360deg);
\t \t \t \t \t \t transform: rotate(360deg);
\t }
}
@-ms-keyframes cssload-loader {
\t 0% {
\t \t -ms-transform: rotate(0deg);
\t \t \t \t \t \t transform: rotate(0deg);
\t }
\t 100% {
\t \t -ms-transform: rotate(360deg);
\t \t \t \t \t \t transform: rotate(360deg);
\t }
}
@-webkit-keyframes cssload-loader {
\t 0% {
\t \t -webkit-transform: rotate(0deg);
\t \t \t \t \t \t transform: rotate(0deg);
\t }
\t 100% {
\t \t -webkit-transform: rotate(360deg);
\t \t \t \t \t \t transform: rotate(360deg);
\t }
}
@-moz-keyframes cssload-loader {
\t 0% {
\t \t -moz-transform: rotate(0deg);
\t \t \t \t \t \t transform: rotate(0deg);
\t }
\t 100% {
\t \t -moz-transform: rotate(360deg);
\t \t \t \t \t \t transform: rotate(360deg);
\t }
}
<?php
get_header();
get_template_part('index', 'banner');
?>
<!-- Blog Full Width Section -->
<div class="blog-section">
\t <div class="container">
\t \t <div class="row"> \t \t
\t \t \t <!--Blog Area-->
\t \t \t <div class="<?php elitepress_post_layout_class(); ?>" >
\t \t \t <?php get_template_part('content',''); ?>
\t \t \t <?php comments_template('',true); ?>
\t \t \t </div>
\t \t \t <!--/Blog Area-->
<div class="preloader" style="display: block;">
<div class="cssload-loader" style="display: block;">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
\t </div>
\t </div>
\t \t \t <?php get_sidebar(); ?>
\t \t </div>
</div>
</div>
<?php get_footer(); ?>
<!-- /Blog Full Width Section -->
答
一个使用FontAwesome微调器的简单解决方案。使用的颜色仅用于可视化。
$(".spinner").delay(1400).fadeOut();
header,
nav,
footer {
width: 100%;
height: 50px;
}
header {
background-color: red;
}
nav {
background-color: blue;
}
footer {
background-color: green;
}
.content {
width: 100%;
height: 200px;
position: relative;
}
.spinner {
width: 100%;
height: 100%;
background-color: purple;
text-align: center;
display: table;
}
.spinner i {
display: table-cell;
vertical-align: middle;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header></header>
<nav></nav>
<div class="content">
<div class="spinner"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
</div>
<footer></footer>
我希望我的微调(; – Evlosh