css loading动画实现

使用css来实现loading动画是非常方便的，只需要用到css的动画属性就可以。

animation

animation: name duration timing-function delay iteration-count direction;
// name: 需要绑定到选择器的 keyframe 名称
// duration: 完成动画所花费的时间
// timing-function: 动画的速度曲线
// delay: 动画开始之前的延迟
// iteration-count: 动画应该播放的次数
// direction: 是否应该轮流反向播放动画

示例图

html 布局

   <div class="loading-box">
       <div class="loading">
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
        </div>
    </div>

css

  .loading-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading {
    width: 1rem;
  }

  .loading span {
    display: inline-block;
    width: .08rem;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
  }
  
  @-webkit-keyframes load {
    0%,
    100% {
      height: .15rem;
      background: lightgreen;
    }

    50% {
      height: .4rem;
      margin: -.15rem 0;
      background: lightblue;
    }
  }

  .loading span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
  }

  .loading span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
  }

  .loading span:nth-child(4) {
    -webkit-animation-delay: 0.6s;
  }

  .loading span:nth-child(5) {
    -webkit-animation-delay: 0.8s;
  }

• 如此就可用css制作简单的loading动画了。