完成效果:

html代碼:

<!--外部容器-->
<div class="container">
<!-- 動畫容器-->
 <div class="box">
<!-- 外-->
 <i></i>
<!-- 內-->
 <i></i>
 </div>
<!-- 文字-->
 <span>加載中...</span>
</div>

css代碼:

<style type="text/css">
 /*外部容器樣式*/
 .container{
 width: 300px;
 height: 300px;
 background-color: #99999952;
 border: 1px solid #999;
 margin: 40px auto;
 font-size: 10px;
 /*內部元素居中*/
 flex-direction: column;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 /*動畫元素容器樣式*/
 .box{
 width: 100px;
 height: 100px;
 position: relative;
 }
 /*動畫元素樣式*/
 .box > i{
 display: block;
 border: 2px solid #333;
 position: absolute;
 border-radius: 50%;
 }
 /*動畫:旋轉180度縮放0.6倍*/
 @keyframes anim {
 0%{
 transform: rotate(0) scale(1);
 }
 50%{
 transform: rotate(180deg) scale(0.6);
 }
 100%{
 transform: rotate(360deg) scale(1);
 }
 }
 /*兩個動畫元素各自的樣式*/
 .box i:nth-child(1){
 width: 60px;
 height: 60px;
 left: 20px;
 top: 20px;
 /*transparent為透明*/
 border-color:transparent #FF386D;
 animation: anim 1s infinite 0s ease-in-out;
 }
 .box i:nth-child(2){
 width: 20px;
 height: 20px;
 left: 40px;
 top: 40px;
 border-color: transparent #00C3FF;
 /*reverse反向 調用動畫*/
 animation: anim 1s infinite 0.5s ease-in-out reverse;
 }
</style>

這是一個純CSS的曲線旋轉loading動畫