微信小程序--加载动画：收缩方块

效果展示

Demo代码

index.wxml

  <view class="loading">
   <view class="a"></view>
   <view class="a"> </view>
   <view class="a"></view>
   <view class="a"> </view>
  </view>

index.json

{
  "usingComponents": {}
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

index.wxss

page{
  background-color: #f5cd79; 
}
.loading{
  position: absolute; 
  top: 50%;
  left: 50%;
  height: 40px; 
  width: 40px;
  transform: translate(-50%, -50%) rotate(45deg) translate3d(0,0,0);
.
.
.

.
.
.

.
.
.
完整代码获取