给你的网站做一个加载动画

该实现思路是再网站的最前页加一个动画，然后再合适的时候把它去掉，虽然好看但是感觉优点影响正常浏览网站的体验。

以下是具体实现：

1. 首先我们先需要通过JS代码将这个加载动动画方法注册到页面中，并设置一个最大等待时间，这里就一秒。

window.addEventListener('load', function () {
        let loader = document.getElementById("loading-warp");
        loader.className = "loading-animations loading-animations-out";//使用渐隐的方法淡出loading page
        setTimeout(() => {
            loader.style.display = "none"
        }, 1000);
    });

2. 然后是使用HTML标签

<div class="loading-animations" id="loading-warp">
   <div class="la-ball-clip-rotate">
      <div></div>
   </div>
</div>

3. 最后是CSS样式，这里随便用了一个

.loading-animations
{
background: #666;
       position: fixed;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: 1s;
       opacity: 1;
} 
.la-ball-clip-rotate,
.la-ball-clip-rotate > div {
   position: relative;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}
.la-ball-clip-rotate {
   display: block;
   font-size: 0;
   color: #fff;
}
.la-ball-clip-rotate.la-dark {
   color: #333;
}
.la-ball-clip-rotate > div {
   display: inline-block;
   float: none;
   background-color: currentColor;
   border: 0 solid currentColor;
}
.la-ball-clip-rotate {
   width: 32px;
   height: 32px;
}
.la-ball-clip-rotate > div {
   width: 32px;
   height: 32px;
   background: transparent;
   border-width: 2px;
   border-bottom-color: transparent;
   border-radius: 100%;
   -webkit-animation: ball-clip-rotate .75s linear infinite;
      -moz-animation: ball-clip-rotate .75s linear infinite;
        -o-animation: ball-clip-rotate .75s linear infinite;
           animation: ball-clip-rotate .75s linear infinite;
}
.la-ball-clip-rotate.la-sm {
   width: 16px;
   height: 16px;
}
.la-ball-clip-rotate.la-sm > div {
   width: 16px;
   height: 16px;
   border-width: 1px;
}
.la-ball-clip-rotate.la-2x {
   width: 64px;
   height: 64px;
}
.la-ball-clip-rotate.la-2x > div {
   width: 64px;
   height: 64px;
   border-width: 4px;
}
.la-ball-clip-rotate.la-3x {
   width: 96px;
   height: 96px;
}
.la-ball-clip-rotate.la-3x > div {
   width: 96px;
   height: 96px;
   border-width: 6px;
}
/*
* Animation
*/
@-webkit-keyframes ball-clip-rotate {
   0% {
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(180deg);
               transform: rotate(180deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
               transform: rotate(360deg);
   }
}
@-moz-keyframes ball-clip-rotate {
   0% {
       -moz-transform: rotate(0deg);
            transform: rotate(0deg);
   }
   50% {
       -moz-transform: rotate(180deg);
            transform: rotate(180deg);
   }
   100% {
       -moz-transform: rotate(360deg);
            transform: rotate(360deg);
   }
}
@-o-keyframes ball-clip-rotate {
   0% {
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
   }
   50% {
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
   }
   100% {
       -o-transform: rotate(360deg);
          transform: rotate(360deg);
   }
}
@keyframes ball-clip-rotate {
   0% {
       -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
               transform: rotate(180deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
               transform: rotate(360deg);
   }
}