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

【问题标题】：preloader for part of content in current theme wp当前主题 wp 中部分内容的预加载器
【发布时间】：2017-06-29 13:35:05
【问题描述】：

我只需要在“内容”div 中显示预加载器，但预加载器会隐藏整个页面。结构站点：

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

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

 src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
 
	$(window).load(function() {
	$(".cssload-loader").delay(1400).fadeOut();
	$(".preloader").delay(1500).fadeOut("slow");
	})
.preloader {
    position: fixed;
    background-color: #fff;
    z-index: 107;
    height: 100%;
    width: 100%;
}

.cssload-loader {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34.284271247462px;
	height: 34.284271247462px;
	margin-left: -17.142135623731px;
	margin-top: -17.142135623731px;
	border-radius: 100%;
	animation-name: cssload-loader;
		-o-animation-name: cssload-loader;
		-ms-animation-name: cssload-loader;
		-webkit-animation-name: cssload-loader;
		-moz-animation-name: cssload-loader;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-timing-function: linear;
		-o-animation-timing-function: linear;
		-ms-animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
	animation-duration: 2.8s;
		-o-animation-duration: 2.8s;
		-ms-animation-duration: 2.8s;
		-webkit-animation-duration: 2.8s;
		-moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
	display: block;
	width: 4px;
	height: 14px;
	background-color: rgba(0,0,0,0.81);
	margin: 1px;
	position: absolute;
	border-radius: 50%;
	animation-duration: 1.045s;
		-o-animation-duration: 1.045s;
		-ms-animation-duration: 1.045s;
		-webkit-animation-duration: 1.045s;
		-moz-animation-duration: 1.045s;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-timing-function: ease;
		-o-animation-timing-function: ease;
		-ms-animation-timing-function: ease;
		-webkit-animation-timing-function: ease;
		-moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
	transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
	animation-name: cssload-rotate0;
		-o-animation-name: cssload-rotate0;
		-ms-animation-name: cssload-rotate0;
		-webkit-animation-name: cssload-rotate0;
		-moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
	transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
	animation-name: cssload-rotate90;
		-o-animation-name: cssload-rotate90;
		-ms-animation-name: cssload-rotate90;
		-webkit-animation-name: cssload-rotate90;
		-moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	animation-name: cssload-rotate45;
		-o-animation-name: cssload-rotate45;
		-ms-animation-name: cssload-rotate45;
		-webkit-animation-name: cssload-rotate45;
		-moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
	transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
	animation-name: cssload-rotate135;
		-o-animation-name: cssload-rotate135;
		-ms-animation-name: cssload-rotate135;
		-webkit-animation-name: cssload-rotate135;
		-moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
	top: 17.142135623731px;
	left: 34.284271247462px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
	top: 29.213203431093px;
	left: 29.213203431093px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
	top: 34.284271247462px;
	left: 17.142135623731px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
	top: 29.213203431093px;
	left: 5.0710678163691px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
	top: 17.142135623731px;
	left: 0px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
	top: 5.0710678163691px;
	left: 5.0710678163691px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
	top: 0px;
	left: 17.142135623731px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
	top: 5.0710678163691px;
	left: 29.213203431093px;
	margin-left: -2px;
	margin-top: -7px;
	animation-delay: 0;
		-o-animation-delay: 0;
		-ms-animation-delay: 0;
		-webkit-animation-delay: 0;
		-moz-animation-delay: 0;
}

@keyframes cssload-rotate0 {
	0% {
		transform: rotate(0deg);
	}
	60% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@-o-keyframes cssload-rotate0 {
	0% {
		-o-transform: rotate(0deg);
	}
	60% {
		-o-transform: rotate(180deg);
	}
	100% {
		-o-transform: rotate(180deg);
	}
}

@-ms-keyframes cssload-rotate0 {
	0% {
		-ms-transform: rotate(0deg);
	}
	60% {
		-ms-transform: rotate(180deg);
	}
	100% {
		-ms-transform: rotate(180deg);
	}
}

@-webkit-keyframes cssload-rotate0 {
	0% {
		-webkit-transform: rotate(0deg);
	}
	60% {
		-webkit-transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
	}
}

@-moz-keyframes cssload-rotate0 {
	0% {
		-moz-transform: rotate(0deg);
	}
	60% {
		-moz-transform: rotate(180deg);
	}
	100% {
		-moz-transform: rotate(180deg);
	}
}

@keyframes cssload-rotate90 {
	0% {
		transform: rotate(90deg);
						transform: rotate(90deg);
	}
	60% {
		transform: rotate(270deg);
						transform: rotate(270deg);
	}
	100% {
		transform: rotate(270deg);
						transform: rotate(270deg);
	}
}

@-o-keyframes cssload-rotate90 {
	0% {
		-o-transform: rotate(90deg);
						transform: rotate(90deg);
	}
	60% {
		-o-transform: rotate(270deg);
						transform: rotate(270deg);
	}
	100% {
		-o-transform: rotate(270deg);
						transform: rotate(270deg);
	}
}

@-ms-keyframes cssload-rotate90 {
	0% {
		-ms-transform: rotate(90deg);
						transform: rotate(90deg);
	}
	60% {
		-ms-transform: rotate(270deg);
						transform: rotate(270deg);
	}
	100% {
		-ms-transform: rotate(270deg);
						transform: rotate(270deg);
	}
}

@-webkit-keyframes cssload-rotate90 {
	0% {
		-webkit-transform: rotate(90deg);
						transform: rotate(90deg);
	}
	60% {
		-webkit-transform: rotate(270deg);
						transform: rotate(270deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
						transform: rotate(270deg);
	}
}

@-moz-keyframes cssload-rotate90 {
	0% {
		-moz-transform: rotate(90deg);
						transform: rotate(90deg);
	}
	60% {
		-moz-transform: rotate(270deg);
						transform: rotate(270deg);
	}
	100% {
		-moz-transform: rotate(270deg);
						transform: rotate(270deg);
	}
}

@keyframes cssload-rotate45 {
	0% {
		transform: rotate(45deg);
						transform: rotate(45deg);
	}
	60% {
		transform: rotate(225deg);
						transform: rotate(225deg);
	}
	100% {
		transform: rotate(225deg);
						transform: rotate(225deg);
	}
}

@-o-keyframes cssload-rotate45 {
	0% {
		-o-transform: rotate(45deg);
						transform: rotate(45deg);
	}
	60% {
		-o-transform: rotate(225deg);
						transform: rotate(225deg);
	}
	100% {
		-o-transform: rotate(225deg);
						transform: rotate(225deg);
	}
}

@-ms-keyframes cssload-rotate45 {
	0% {
		-ms-transform: rotate(45deg);
						transform: rotate(45deg);
	}
	60% {
		-ms-transform: rotate(225deg);
						transform: rotate(225deg);
	}
	100% {
		-ms-transform: rotate(225deg);
						transform: rotate(225deg);
	}
}

@-webkit-keyframes cssload-rotate45 {
	0% {
		-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
	}
	60% {
		-webkit-transform: rotate(225deg);
						transform: rotate(225deg);
	}
	100% {
		-webkit-transform: rotate(225deg);
						transform: rotate(225deg);
	}
}

@-moz-keyframes cssload-rotate45 {
	0% {
		-moz-transform: rotate(45deg);
						transform: rotate(45deg);
	}
	60% {
		-moz-transform: rotate(225deg);
						transform: rotate(225deg);
	}
	100% {
		-moz-transform: rotate(225deg);
						transform: rotate(225deg);
	}
}

@keyframes cssload-rotate135 {
	0% {
		transform: rotate(135deg);
						transform: rotate(135deg);
	}
	60% {
		transform: rotate(315deg);
						transform: rotate(315deg);
	}
	100% {
		transform: rotate(315deg);
						transform: rotate(315deg);
	}
}

@-o-keyframes cssload-rotate135 {
	0% {
		-o-transform: rotate(135deg);
						transform: rotate(135deg);
	}
	60% {
		-o-transform: rotate(315deg);
						transform: rotate(315deg);
	}
	100% {
		-o-transform: rotate(315deg);
						transform: rotate(315deg);
	}
}

@-ms-keyframes cssload-rotate135 {
	0% {
		-ms-transform: rotate(135deg);
						transform: rotate(135deg);
	}
	60% {
		-ms-transform: rotate(315deg);
						transform: rotate(315deg);
	}
	100% {
		-ms-transform: rotate(315deg);
						transform: rotate(315deg);
	}
}

@-webkit-keyframes cssload-rotate135 {
	0% {
		-webkit-transform: rotate(135deg);
						transform: rotate(135deg);
	}
	60% {
		-webkit-transform: rotate(315deg);
						transform: rotate(315deg);
	}
	100% {
		-webkit-transform: rotate(315deg);
						transform: rotate(315deg);
	}
}

@-moz-keyframes cssload-rotate135 {
	0% {
		-moz-transform: rotate(135deg);
						transform: rotate(135deg);
	}
	60% {
		-moz-transform: rotate(315deg);
						transform: rotate(315deg);
	}
	100% {
		-moz-transform: rotate(315deg);
						transform: rotate(315deg);
	}
}

@keyframes cssload-loader {
	0% {
		transform: rotate(0deg);
						transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
						transform: rotate(360deg);
	}
}

@-o-keyframes cssload-loader {
	0% {
		-o-transform: rotate(0deg);
						transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-loader {
	0% {
		-ms-transform: rotate(0deg);
						transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-loader {
	0% {
		-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-loader {
	0% {
		-moz-transform: rotate(0deg);
						transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
						transform: rotate(360deg);
	}
}
<?php 
get_header();
get_template_part('index', 'banner');
?>
<!-- Blog Full Width Section -->
<div class="blog-section">
	<div class="container">
		<div class="row">		
			<!--Blog Area-->
			<div class="<?php elitepress_post_layout_class(); ?>" >
			<?php get_template_part('content',''); ?>
			<?php comments_template('',true); ?>
			</div>
			<!--/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>
   	</div>
	</div>
			<?php get_sidebar(); ?>
		</div>
   </div>
     </div>
<?php get_footer(); ?>
<!-- /Blog Full Width Section -->

【问题讨论】：

    标签： javascript jquery css wordpress preloader


    【解决方案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>

    【讨论】：

    • 我想要我的微调器 (;
    猜你喜欢
    • 1970-01-01
    • 2020-06-02
    • 1970-01-01
    • 1970-01-01
    • 2018-10-12
    • 2013-01-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode