技術標籤：c3動畫css3

用css寫loading
我們通常讓一個元素變成圓形是先將一個元素設定為長和寬相等的正方形，然後給這個元素設定一個border-radius值為50%。需要注意的是，border-radius: 50%是讓整個正方形元素都變成圓形，即包括邊框和內容區。所以我們可以通過控制元素邊框和內容區的大小，將元素的內容區域作為內圓，將元素的邊框區域作為外圓，從而繪製出一個圓環。
<div class="loading-css"></div>

.loading-css {
    width: 50px; /*先將loading區域變成正方形*/
    height: 50px;
    display: inline-block; /*將loading區域變成行內元素，防止旋轉的時候，100%寬度都在旋轉*/
    border: 3px solid #f3f3f3; /*設定四周邊框大小，並將顏色設定為淺白色*/
    border-top: 3px solid red; /*將上邊框顏色設定為紅色高亮，以便旋轉的時候能夠看到旋轉的效果*/
    border-radius: 50%; /*將邊框和內容區域都變成圓形*/
}
 

此時效果如下:

圓環效果已經出來了，接下來讓圓環旋轉起來即可，如:

@keyframes loading-360 {
    0% {
        transform: rotate(0deg); /*動畫起始的時候旋轉了0度*/
    }
    100% {
        transform: rotate(360deg); /*動畫結束的時候旋轉了360度*/
    }
}
.loading-css { /*在之前的CSS中加上動畫效果即可*/
    animation: loading-360 0.8s infinite linear; /*給圓環新增旋轉360度的動畫，並且是無限次*/
}