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

index.wxml

<view class&＃61;"loading"><view class&＃61;"a"></view><view class&＃61;"a"> </view><view class&＃61;"a"></view><view class&＃61;"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);
.
.
..
.
..
.
.
完整代码获取