加载页面可以平滑过渡网站资源文件加载中的过程,加入以下代码,使网站拥有加载效果

html

这个标签必须写在最前面,因为html按照顺序加载,如果不在最前面的话。会出现主页闪现之后再出现加载页面。

<div class="loading-panel" id="loading-panel">
  <div class="loading-box">
    <div class="thing"></div>
    <div class="thing"></div>
    <div class="thing"></div>
    <div class="thing"></div>
  </div>
</div>

css

body{
overflow: hidden;
}
.loading-panel{
position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background:#1d1f20;
}

.loading-box {
    height: 100px;
    width: 100px;
    position: relative;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    perspective: 1000px;
}

.thing {

  height: 50px;
    width: 50px;
    background-color: #E87722;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
}
.thing:nth-of-type(1) {
    animation: bounce 0.5s ease-in-out infinite alternate, move 4s -1s infinite;
}
.thing:nth-of-type(2) {
    animation: bounce 0.5s ease-in-out infinite alternate, move 4s -2s infinite;
}
.thing:nth-of-type(3) {
    animation: bounce 0.5s ease-in-out infinite alternate, move 4s -3s infinite;
}
.thing:nth-of-type(4) {
    animation: bounce 0.5s ease-in-out infinite alternate, move 4s -4s infinite;
}
@keyframes bounce {
  from {transform: scale(1);}
  to {transform: scale(0.8);}
}
.fadeout{
  -webkit-transition: all 1.5s;  
 -moz-transition: all 1.5s;  
 -ms-transition: all 1.5s;  
 -o-transition: all 1.5s;  
 transition: all 1.5s;  
 opacity: 0;
}
.loaded{
 display:none;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
    background-color: #E87722;
  }
  25% {
    top: 0;
    left: 50%;
    background-color: #A4D65E;
  }
  50% {
    top: 50%;
    left: 50%;
    background-color: #69B3E7;
  }
  75% {
    top: 50%;
    left: 0;
    background-color: #FFC845;
  }
}

js

为了实现加载完成之后移除加载效果

const preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-panel').classList.add("fadeout")
   setTimeout(() => {
   document.getElementById('loading-panel').classList.add("loaded")
}, "1000")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-panel').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> { preloader.endLoading() })