實現效果（還是有很多不完善，如果你是需要多個你可以複製然後改個名字就可以重負使用了，當然你也可以弄成元件來高可用）:

index.wxml

<view class='content'>
  <image class='img' animation="{{animationData}}" src='{{statusImage}}'></image>
  <view class='row {{statusClass}}'></view>
</view>

index.wxss

.content {
  margin-left: 5%;
  margin-top: 50%;
}
.img {
  width: 30px;
  height: 30px;
}
.row {
  display: inline-block;
  width: 70%;
  height: 30px;
  margin-left: 10px;
  border-radius: 10px;
}
/* 載入 */
.load {
   background-color: #7B7878;
}
/* 失敗 */
.failing {
  background-color: #E51C23;
}
/* 成功 */
.success {
  background-color: #7FCA27;
}
 

index.js

data 變數是根據你的業務來做處理的，這個隨機應變。

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    rotateIndex: '',
    animationData: {},
    statusImage: '/resource/images/1/line_loading.png',
    statusClass: 'load'
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    // 建立動畫
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease'
    })
    this.animation = animation
    // 圖片旋轉
    this.imageRotators()
  },
  // 圖片一直旋轉動畫
  imageRotators: function () {
    //連續動畫需要新增定時器,所傳引數每次+1就行
    this.timeInterval = setInterval(function () {
      this.data.rotateIndex = this.data.rotateIndex + 1;
      this.animation.rotateZ(360 * (this.data.rotateIndex)).step()
      this.setData({
        animationData: this.animation.export()
      })
    }.bind(this), 500)
    // 請求API介面或者別的操作
    this.request()
  },
  // 停止旋轉
  stopRotators: function () {
    if (this.timeInterval > 0) {
      clearInterval(this.timeInterval)
      this.timeInterval = 0
    }
  },
  // 請求API介面或者別的操作
  request: function(e) {
    var that = this
    console.log('request')
    setTimeout(function () {
      // 停止旋轉
      that.stopRotators()
      console.log('請求到了資料或者操作完成,停止旋轉')
      // 這裡是根據自己的業務邏輯設定
      var data =  true
      if (data) {
        that.setData({
          statusImage: '/resource/images/1/line_success.png',
          statusClass: 'success'
        })
      } else {
        that.setData({
          statusImage: '/resource/images/1/line_fail.png',
          statusClass: 'failing'
        })
      }
    }, 3000)
  },
  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  
  }
})