loading图标

1、利用icon

<Spin>
  <Icon type="ios-loading" size=18 class="spin-icon-load"></Icon>
  <div>Loading</div>
</Spin>

<style lang="less" scoped>
    .spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
</style>

2、利用图片

 <view class="loading">
   <image
      mode="aspectFit"
      class="loading-img"
      src="../../images/loading.png"
   ></image>
 </view>


<style lang="less" scoped>
.loading {
  position: absolute;
  top: calc(50% - 48.75rpx);
  left: calc(50% - 48.75rpx);
  animation: loading 1s linear infinite;
  width: 97.5rpx;
  height: 97.5rpx;
}
.loading .loading-img {
  width: 97.5rpx;
  height: 97.5rpx;
}

/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
 */
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>