效果图如下:
相关wxml代码:
<view class="page">
<view class="loading">
<text style="color:greenyellow; font-size:20px;">loading</text>
</view>
</view>
wxss代码:
.page{
margin:0;
padding:0;
background:white; /***#34495e;**/
height: 100vh;
display:flex;
align-items:center;
justify-content: center;
font-family: "montserrat", sans-serif;
}
.loading{
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
border-top: 7px solid #e74c3c;
position: relative;
animation: a1 2s linear infinite;
}
.loading::before, .loading::after{
content:'';
width: 200px;
height: 200px;
background:transparent;
position: absolute;
left:0;
top:-10px;
box-sizing: border-box;
border-radius: 50%;
}
.loading::before{
border-top: 7px solid #e67e22;
transform: rotate(120deg);
}
.loading::after{
border-top: 7px solid #3498db;
transform:rotate(240deg);
}
.loading text{
position: absolute;
width:200px;
height:200px;
text-align: center;
line-height:200px;
animation: a2 2s linear infinite;
}
@keyframes a1{
to{
transform:rotate(360deg);
}
}
@keyframes a2{
to{
transform: rotate(-360deg);
}
}