首页 技术设计 前端 html


上一篇博客已经实现了第一种加载中特效

最近用在新网站后发现问题，刷新频率高的情况下，动画太多反而引起不适。

故又用同样方案，重做了一个好看又干净的 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>