预加载器为当前主题的部分内容wp

Question

我需要仅在'content'div中显示预加载器，但是预加载器隐藏整个页面。结构部位：

1. 标题
2. 菜单
3. 内容（这里我需要预装）
4. 页脚

我找不到，我哪里需要插入我的预加载的代码.. 。

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 -->

Answer 1

一个使用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>