<style>
body{
background:#34495e;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.loading{
position:relative;
width:200px;
height:200px;
border-top:10px solid #e74c3c;
border-radius:50%;
animation:rotate 2s linear infinite;
}
.loading::before{
position:absolute;
top:-10px;
left:0;
content:'';
width:200px;
height:200px;
border-top:10px solid #e67e22;
border-radius:50%;
transform:rotate(120deg);
}
.loading::after{
position:absolute;
top:-10px;
left:0;
content:'';
width:200px;
height:200px;
border-top:10px solid #3498bd;
border-radius:50%;
transform:rotate(240deg);
}
span{
position:absolute;
width:200px;
height:200px;
line-height:200px;
text-align:center;
color:white;
animation:rotateR 2s linear infinite;
}
@keyframes rotate{
to{
transform:rotate(360deg);
}
}
@keyframes rotateR{
to{
transform:rotate(-360deg);
}
}
</style>
<div class="loading">
<span>loading</span>
</div>
<!--
伪元素大小只受内容影响，用定位的方式脱离文档流，所以要用positon，再用top调整位置，此时3个弧重合在一起。再旋转120、240，各自占1/3份
再加动画，省from
此时，span也跟着转，使其正中显示（垂直、水平居中），再加个反之转的动画，平衡之
最后，再之整个在正中显示，即弹性布局-->
