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 布局

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;}