效果展示
微信小程序--加载动画（旋转方块）.gif
Demo代码
wxml
<view class="loading-screen">
<view class="loading">
<view class="flour" ></view>
<view class="flour" ></view>
<view class="flour" ></view>
<view class="flour" ></view>
</view>
</view>
wxss
page{
margin: 0;
padding: 0;
}
.loading-screen{
width: 100%;
height: 100vh;
background-color: #2e2e2e;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loading{
width: 80px;
display: flex;
flex-wrap: wrap;
.
.
.
完整源码获取
微信公众号：海轰Pro
回复：简书
效果展示（改进）
微信小程序--加载动画（旋转方块2）.gif
Demo代码
wxml
<view class="loading-screen">
<view class="loading">
<view class="flour_1" ></view>
<view class="flour_2" ></view>
<view class="flour_3" ></view>
<view class="flour_4" ></view>
</view>
</view>
wxss
page{
margin: 0;
padding: 0;
}
.loading-screen{
width: 100%;
height: 100vh;
background-color: #2e2e2e;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loading{
width: 80px;
display: flex;
flex-wrap: wrap;
animation: rotate 4s linear infinite;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
/* 四色版本 */
.loading .flour_1{
width: 32px;
height: 32px;
background-color: #eb4d4b;
margin: 4px;
.
.
.
完整源码获取
微信公众号：海轰Pro
回复：简书
