Load more circular motion animation

 <view class="loading" hidden="{{!searchLoading}}">
    <image src='../../images/jiazai.png'></image>
    正在载入更多...</view>

.loading{  
  padding: 10rpx;  
    text-align: center;  
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    color: #d3d3d3;
  } 

  .loading image{  
   display:block;  
   margin-right: 5rpx;  
animation: a 1s steps(12) infinite;
   content: '';  
   width: 40rpx;  
   height: 40rpx;  
   background-size: contain;  
 }  

 @keyframes a {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
 .loading.complete:before{  
   display: none;  
 } 

{Data 
    searchLoading: to false , // "on the LAC contained" variables, default false, hidden   
    searchLoadingComplete: to false   // variable "no data" default false, hide} 
the this .setData ({ 
searchLoading: to true 
)}