css写的小程序加载动画

先来效果图

wxml部分

<view class="line-spin-fade-loader">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"></view>
</view>

wxss部分

@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

.line-spin-fade-loader {
  position: relative;
  top: 250rpx;
  left: 50%; 
  transform: scale(4,4);
}

.line-spin-fade-loader > view:nth-child(1) {
top:25rpx;
left:0;
-webkit-animation:line-spin-fade-loader 1.8s -1.32s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.32s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(2) {
top:21.6506rpx;
left:12.5rpx;
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-animation:line-spin-fade-loader 1.8s -1.2s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.2s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(3) {
top:12.5rpx;
left:21.6506rpx;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
-webkit-animation:line-spin-fade-loader 1.8s -1.08s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.08s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(4) {
top:0;
left:25rpx;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.96s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.96s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(5) {
top:-12.5rpx;
left:21.6506rpx;
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.84s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.84s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(6) {
top:-21.6506rpx;
left:12.5rpx;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.72s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.72s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(7) {
  top:-25rpx;
  left:0;
  -webkit-animation:line-spin-fade-loader 1.8s -0.6s infinite ease-in-out;
  animation:line-spin-fade-loader 1.8s -0.6s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(8) {
top:-21.6506rpx;
left:-12.5rpx;
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.48s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.48s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(9) {
top:-12.5rpx;
left:-21.6506rpx;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.36s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.36s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(10) {
top:0;
left:-25rpx;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.24s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.24s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(11) {
top:12.5rpx;
left:-21.6506rpx;
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.12s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.12s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(12) {
  top:21.6506rpx;
  left:-12.5rpx;
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);
  -webkit-animation:line-spin-fade-loader 1.8s 0s infinite ease-in-out;
  animation:line-spin-fade-loader 1.8s 0s infinite ease-in-out;
}

.line-spin-fade-loader > view {
  background-color: #fff;
  border-radius: 2rpx;
  margin: 2rpx;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 5rpx;
  height: 15rpx; 
}