效果：
代码实现：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Loading</title>
-
<style>
-
* {
-
margin: 0em;
-
padding: 0em;
-
}
-
-
.loader {
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
-webkit-transform: translate(-50%, -50%);
-
-moz-transform: translate(-50%, -50%);
-
-mos-transform: translate(-50%, -50%);
-
-o-transform: translate(-50%, -50%);
-
transform: translate(-50%, -50%);
-
text-align: center;
-
-webkit-touch-callout: none;
-
-webkit-user-select: none;
-
-khtml-user-select: none;
-
-moz-user-select: none;
-
-ms-user-select: none;
-
user-select: none;
-
cursor: default;
-
}
-
-
.text {
-
position: absolute;
-
left: -1.3em;
-
top: -1.7em;
-
-webkit-animation: text 2s infinite;
-
-moz-animation: text 2s infinite;
-
-moz-animation: text 2s infinite;
-
-ms-animation: text 2s infinite;
-
-o-animation: text 2s infinite;
-
animation: text 2s infinite;
-
}
-
-
.horizontal {
-
position: absolute;
-
top: 0em;
-
left: 0em;
-
-webkit-transform: rotate(0deg);
-
-moz-transform: rotate(0deg);
-
-ms-transform: rotate(0deg);
-
-o-transform: rotate(0deg);
-
transform: rotate(0deg);
-
}
-
-
.circlesup {
-
position: absolute;
-
top: -4.7em;
-
right: 12.1em;
-
}
-
-
.circle {
-
position: absolute;
-
width: 15em;
-
height: 15em;
-
-webkit-transform: rotate(45deg);
-
-moz-transform: rotate(45deg);
-
-ms-transform: rotate(45deg);
-
-o-transform: rotate(45deg);
-
transform: rotate(45deg);
-
-webkit-animation: orbit 2s infinite;
-
-moz-animation: orbit 2s infinite;
-
-moz-animation: orbit 2s infinite;
-
-ms-animation: orbit 2s infinite;
-
-o-animation: orbit 2s infinite;
-
animation: orbit 2s infinite;
-
z-index: 5;
-
}
-
-
.circle:after {
-
content: '';
-
position: absolute;
-
width: 2em;
-
height: 2em;
-
-webkit-border-radius: 100%;
-
-moz-border-radius: 100%;
-
-ms-border-radius: 100%;
-
-o-border-radius: 100%;
-
border-radius: 100%;
-
background: #17b2f0;
-
}
-
-
.circle:nth-child(2) {
-
-webkit-animation-delay: 100ms;
-
-moz-animation-delay: 100ms;
-
-ms-animation-delay: 100ms;
-
-o-animation-delay: 100ms;
-
animation-delay: 100ms;
-
z-index: 4;
-
}
-
-
.circle:nth-child(2):after {
-
background: #59b9e0;
-
-webkit-transform: scale(0.8, 0.8);
-
-moz-transform: scale(0.8, 0.8);
-
-ms-transform: scale(0.8, 0.8);
-
-o-transform: scale(0.8, 0.8);
-
transform: scale(0.8, 0.8);
-
}
-
-
.circle:nth-child(3) {
-
-webkit-animation-delay: 225ms;
-
-moz-animation-delay: 225ms;
-
-ms-animation-delay: 225ms;
-
-o-animation-delay: 225ms;
-
animation-delay: 225ms;
-
z-index: 3;
-
}
-
-
.circle:nth-child(3):after {
-
background: #ffa489;
-
-webkit-transform: scale(0.6, 0.6);
-
-moz-transform: scale(0.6, 0.6);
-
-ms-transform: scale(0.6, 0.6);
-
-o-transform: scale(0.6, 0.6);
-
transform: scale(0.6, 0.6);
-
}
-
-
.circle:nth-child(4) {
-
-webkit-animation-delay: 350ms;
-
-moz-animation-delay: 350ms;
-
-ms-animation-delay: 350ms;
-
-o-animation-delay: 350ms;
-
animation-delay: 350ms;
-
z-index: 2;
-
}
-
-
.circle:nth-child(4):after {
-
background: #ff6d37;
-
-webkit-transform: scale(0.4, 0.4);
-
-moz-transform: scale(0.4, 0.4);
-
-ms-transform: scale(0.4, 0.4);
-
-o-transform: scale(0.4, 0.4);
-
transform: scale(0.4, 0.4);
-
}
-
-
.circle:nth-child(5) {
-
-webkit-animation-delay: 475ms;
-
-moz-animation-delay: 475ms;
-
-ms-animation-delay: 475ms;
-
-o-animation-delay: 475ms;
-
animation-delay: 475ms;
-
z-index: 1;
-
}
-
-
.circle:nth-child(5):after {
-
background: #DB2F00;
-
-webkit-transform: scale(0.2, 0.2);
-
-moz-transform: scale(0.2, 0.2);
-
-ms-transform: scale(0.2, 0.2);
-
-o-transform: scale(0.2, 0.2);
-
transform: scale(0.2, 0.2);
-
}
-
-
.circlesdwn {
-
position: absolute;
-
top: 2.5em;
-
right: -13.5em;
-
-webkit-transform: rotate(180deg);
-
-moz-transform: rotate(180deg);
-
-ms-transform: rotate(180deg);
-
-o-transform: rotate(180deg);
-
transform: rotate(180deg);
-
}
-
-
.vertical {
-
position: absolute;
-
top: -1.84em;
-
left: -0.4em;
-
-webkit-transform: rotate(90deg);
-
-moz-transform: rotate(90deg);
-
-ms-transform: rotate(90deg);
-
-o-transform: rotate(90deg);
-
transform: rotate(90deg);
-
}
-
-
@-webkit-keyframes text {
-
0% {
-
transform: scale(.2, .2);
-
animation-timing-function: ease-out;
-
}
-
-
50% {
-
transform: scale(1, 1);
-
animation-timing-function: ease-out;
-
}
-
-
60% {
-
transform: scale(1, 1);
-
animation-timing-function: ease-out;
-
}
-
-
100% {
-
transform: scale(.2, .2);
-
}
-
}
-
-
@keyframes text {
-
0% {
-
transform: scale(.2, .2);
-
animation-timing-function: ease-out;
-
}
-
-
50% {
-
transform: scale(1, 1);
-
animation-timing-function: ease-out;
-
}
-
-
60% {
-
transform: scale(1, 1);
-
animation-timing-function: ease-out;
-
}
-
-
100% {
-
transform: scale(.2, .2);
-
}
-
}
-
-
@-webkit-keyframes orbit {
-
0% {
-
transform: rotate(45deg);
-
}
-
-
5% {
-
transform: rotate(45deg);
-
animation-timing-function: ease-out;
-
}
-
-
70% {
-
transform: rotate(405deg);
-
animation-timing-function: ease-in;
-
}
-
-
100% {
-
transform: rotate(405deg);
-
}
-
}
-
-
@keyframes orbit {
-
0% {
-
transform: rotate(45deg);
-
}
-
-
5% {
-
transform: rotate(45deg);
-
animation-timing-function: ease-out;
-
}
-
-
70% {
-
transform: rotate(405deg);
-
animation-timing-function: ease-in;
-
}
-
-
100% {
-
transform: rotate(405deg);
-
}
-
}
-
-
#content {
-
width: 100%;
-
height: 100%;
-
opacity: 0;
-
transition: opacity 0.5s;
-
}
-
-
#content iframe {
-
width: 100%;
-
height: -webkit-fill-available;
-
}
-
</style>
-
-
</head>
-
<body>
-
<div class="loader" id="loader">
-
<div class="text">Loading...</div>
-
<div class="horizontal">
-
<div class="circlesup">
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
</div>
-
<div class="circlesdwn">
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
</div>
-
</div>
-
<div class="vertical">
-
<div class="circlesup">
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
</div>
-
<div class="circlesdwn">
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
<div class="circle"></div>
-
</div>
-
</div>
-
</div>
-
<div id="content">
-
<iframe src="//www.albertyy.com"></iframe>
-
</div>
-
</body>
-
<script>
-
document.onreadystatechange = loadingChange; //当页面加载状态改变的时候执行这个方法.
-
function loadingChange() {
-
if (document.readyState == "complete") { //当页面加载状态为完全结束时进入
-
document.getElementById("loader").style.display = "none";
-
document.getElementById("content").style.opacity = 1;
-
}
-
}
-
</script>
-
</html>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/107083268