五分钟实现炫酷的加载效果

在网页加载相关内容的时候为用户加上一个合适的加载过程动画或者文字提示，可以转移用户注意，提高用户体验。统计显示随着网页更新时间越长，用户流失越多。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
       body{
  margin: 0;
  padding: 0;
  background: #b929b5;
}
.loading{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 40px;
  display: flex;
  align-items: center;
}
.item{
   6px;
  height: 40px;
  background: #fff;
  margin: 0 3px;
  border-radius: 10px;
  animation: loading 0.8s infinite;
}
.item:nth-child(2){
  animation-delay: 0.1s;
}
.item:nth-child(3){
  animation-delay: 0.2s;
}
.item:nth-child(4){
  animation-delay: 0.3s;
}
.item:nth-child(5){
  animation-delay: 0.4s;
}
.item:nth-child(6){
  animation-delay: 0.5s;
}
.item:nth-child(7){
  animation-delay: 0.6s;
}
.item:nth-child(8){
  animation-delay: 0.7s;
}
@keyframes loading{
  0%{
    height: 0;
  }
  50%{
    height: 40px;
  }
  100%{
    0
  }
}
    </style>
  </head>
  <body>
    <div class="loading">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

你好，欢迎你来到博客，我是布莱昂。在这里你将看到我关于前端技术和框架的一些理解和体会，并且以后所有博客将在这里发布，由于本人技术水平和认知能力有限，文中难免有认识不足和理解错误的地方，欢迎大家留言指正，我将感激不尽！