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

时间:2017-06-29 13:35:05

标签: javascript jquery css wordpress preloader

我只需要在内容中显示预加载器' div,但preloader隐藏了整个页面。结构网站:

  1. 标题
  2. 菜单
  3. 内容(此处我需要预加载器)
  4. 页脚
  5. 我无法找到,我需要插入预加载器的代码......

    
    
    InsertQuery
    
     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);
    	}
    }
    
    
    

1 个答案:

答案 0 :(得分:0)

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