上一篇博客已经实现了第一种加载中特效
最近用在新网站后发现问题，刷新频率高的情况下，动画太多反而引起不适。
故又用同样方案，重做了一个好看又干净的loading加载中动画，用法和之前一样，也是基于原生js css，无第三方依赖。
loading.js
document.body.innerHTML += ('<div id="preloader-body"><div id="cube-wrapper"><div class="cube-folding"><span class="leaf1"></span><span class="leaf2"></span><span class="leaf3"></span><span class="leaf4"></span></div><span class="loading"data-name="Loading">Loading</span></div></div>');
window.onload = function () {
document.getElementById('cube-wrapper').style.display = "none";
document.getElementById('preloader-body').style.display = "none";
}
loading.css
#preloader-body{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999;
}
.cube-folding {
width: 50px;
height: 50px;
display: inline-block;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-size: 0;
}
.cube-folding span {
position: relative;
width: 25px;
height: 25px;
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
display: inline-block;
}
.cube-folding span::before {
content: '';
background-color: #007ee5;
position: absolute;
left: 0;
top: 0;
display: block;
width: 25px;
height: 25px;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-moz-animation: folding 2.5s infinite linear both;
-webkit-animation: folding 2.5s infinite linear both;
animation: folding 2.5s infinite linear both;
}
.cube-folding .leaf2 {
-moz-transform: rotateZ(90deg) scale(1.1);
-ms-transform: rotateZ(90deg) scale(1.1);
-webkit-transform: rotateZ(90deg) scale(1.1);
transform: rotateZ(90deg) scale(1.1);
}
.cube-folding .leaf2::before {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
background-color: #34a4ff;
}
.cube-folding .leaf3 {
-moz-transform: rotateZ(270deg) scale(1.1);
-ms-transform: rotateZ(270deg) scale(1.1);
-webkit-transform: rotateZ(270deg) scale(1.1);
transform: rotateZ(270deg) scale(1.1);
}
.cube-folding .leaf3::before {
-moz-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
background-color: #83c7ff;
}
.cube-folding .leaf4 {
-moz-transform: rotateZ(180deg) scale(1.1);
-ms-transform: rotateZ(180deg) scale(1.1);
-webkit-transform: rotateZ(180deg) scale(1.1);
transform: rotateZ(180deg) scale(1.1);
}
.cube-folding .leaf4::before {
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
background-color: #5cb6ff;
}
@-moz-keyframes folding {
0%, 10% {
-moz-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-moz-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-moz-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@-webkit-keyframes folding {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes folding {
0%, 10% {
-moz-transform: perspective(140px) rotateX(-180deg);
-ms-transform: perspective(140px) rotateX(-180deg);
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-moz-transform: perspective(140px) rotateX(0deg);
-ms-transform: perspective(140px) rotateX(0deg);
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-moz-transform: perspective(140px) rotateY(180deg);
-ms-transform: perspective(140px) rotateY(180deg);
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#cube-wrapper {
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
text-align: center;
}
#cube-wrapper:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -20px;
margin: auto;
width: 90px;
height: 6px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-filter: blur(2px);
filter: blur(2px);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
z-index: 1;
-moz-animation: shadow 0.5s ease infinite alternate;
-webkit-animation: shadow 0.5s ease infinite alternate;
animation: shadow 0.5s ease infinite alternate;
}
#cube-wrapper .loading {
font-size: 12px;
letter-spacing: 0.1em;
display: block;
color: #007ee5;
position: relative;
top: 25px;
z-index: 2;
-moz-animation: text 0.5s ease infinite alternate;
-webkit-animation: text 0.5s ease infinite alternate;
animation: text 0.5s ease infinite alternate;
}
用法与上次完全一致，简单说下。
方案1 直接引入，立即生效。
demo.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>demo</title>
<link rel="stylesheet" href="css/loading.css"/>
</head>
<body>
<!-- 此方案js必须引入在body第一行 -->
<script src="js/loading.js"></script>
<!-- 其余代码写在后面即可 -->
</body>
</html>
方案2 不引入js，将代码写入html
demo.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>demo</title>
<link rel="stylesheet" href="css/loading.css"/>
</head>
<body>
<!-- 写在开头 -->
<div id="preloader-body">
<div id="cube-wrapper">
<div class="cube-folding">
<span class="leaf1"></span>
<span class="leaf2"></span>
<span class="leaf3"></span>
<span class="leaf4"></span>
</div>
<span class="loading"data-name="Loading">Loading</span>
</div>
</div>
<!-- 中间写其他代码 -->
<script>
// 末尾绑定window.onload事件 (也可以用jquery或者vue实现，只需要在window加载完毕后，触发隐藏2个div即可)
window.onload = function () {
document.getElementById('cube-wrapper').style.display = "none";
document.getElementById('preloader-body').style.display = "none";
}
</script>
</body>
</html>
