我只需要在内容中显示预加载器' div,但preloader隐藏了整个页面。结构网站:
我无法找到,我需要插入预加载器的代码......
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);
}
}

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