最简单的加载动效

纯CSS实现加载动效：一个小程序的加载页面(emmm….简单可依赖)

HTML实现代码

<view class='onloadPic'>
  <view></view>
  <view></view>
  <view></view>
</view>

css实现代码
用块状元素设置布局，画三个像加载图标的圆点，用animation实现过渡动画

.onloadPic{
  width: 84rpx;
  height: 36rpx;
  margin: 30rpx auto;
}
.onloadPic view{
  width: 10rpx;
  height: 10rpx;
  line-height: 36rpx;
  display: inline-block;
  margin: .19em;
  background: #ccc;
  border-radius: .6em;
  -webkit-animation: loading .5s infinite alternate;
          animation: loading .5s infinite alternate;
}
.onloadPic view:nth-of-type(2) {
  background: #ccc;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.onloadPic view:nth-of-type(3) {
  background: #ccc;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}