design sketch :

wxml content :
<!-- loading.wxml --> <view class="loading"> <view class="dot"
animation="{{alpha[0]}}"></view> <view class="dot"
animation="{{alpha[1]}}"></view> <view class="dot"
animation="{{alpha[2]}}"></view> <view class="dot"
animation="{{alpha[3]}}"></view> <view class="dot"
animation="{{alpha[4]}}"></view> </view>
wxss content :
/** loading.wxss **/ .loading { width: 100%; position: absolute; bottom:
150rpx; justify-content: center; text-align: center; } .loading .dot{
background-color: #fff; display: inline-block; /** The dot size is set here , Consistent height and width , The fillet value is half of the height and width **/
width: 16rpx; height: 16rpx; border-radius: 8rpx; margin: 0 10rpx; opacity: 0; }
js content :
/* loading.js */ Page({ data: { alpha: [1,1,1,1,1] }, onLoad: function () {
var self = this; var _index = 0; var _alpha = self.data.alpha; var _speed =
500; var timer = setInterval(function () { var an_show =
wx.createAnimation({}); var an_hide = wx.createAnimation({});
an_show.opacity(1).step({ duration: _speed }); an_hide.opacity(0).step({
duration: _speed }); _alpha[_index] = an_show; _alpha[_index == 0 ? 4 : _index
- 1] = an_hide; self.setData({ alpha: _alpha }) _index = _index == 4 ? 0 :
_index + 1; }, _speed); } })
 

Technology
©2019-2020 Toolsou All rights reserved,
Python Basic knowledge and notes Programmer Tanabata Valentine's Day confession code NOI2019 travels China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour C Language programming to find a student's grade Software testing BUG describe ESP8266/ESP32 System : Optimize system startup time Unity Scene loading asynchronously ( Implementation of loading interface ) Baidu , Ali , Tencent's internal position level and salary structure , With job suggestions !PYTHON Summary of final review