.load-container {
width: 30%;
height: auto;
position: relative;
margin: 1rem auto;
}
.load {
width: 2.6rem;
height: 2.6rem;
margin: 0 auto;
border: 0.4rem solid #f3f3f3;
border-top: 0.4rem solid #33adee;
border-radius: 50%;
animation: loading 1.2s infinite linear;
}
@-webkit-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-moz-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-ms-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-o-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="load-container">
<div class="load"></div>
</div>
![](https://images2017.cnblogs.com/blog/1194009/201711/1194009-20171121174240993-857243673.png)