CSS是網頁設計中的重要一環，它可以讓我們實現一些炫酷的效果。其中，圓形加載動畫是一種常見的效果。下面，我們就來看一下如何用CSS實現圓形加載動畫。

.loading {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
}
.loading:before {
content: "";
display: block;
padding-top: 100%;
}
.loading:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #fff;
border-top-color: transparent;
animation: loading 1s ease-in-out infinite;
}
@keyframes loading {
0% {
transform: rotate(0);
border-width: 5px;
}
50% {
transform: rotate(180deg);
border-width: 3px;
}
100% {
transform: rotate(360deg);
border-width: 5px;
}
}

首先，我們要創建一個div元素，class為loading。在這個div中，我們創建了偽元素:before，用來設置div的高度為寬度的100%。

然后，我們在div中創建了偽元素:after。這個元素用來實現加載動畫。它的position為absolute，top和left為0，寬高都是100%，并且設置了一個50%的圓形邊框，顏色為白色。

接著，我們定義了一個名為loading的動畫，實現了一個從無到有、再到消失的旋轉效果。在0%處，我們沒有旋轉，邊框的寬度為5px。在50%處，我們將元素旋轉180度，邊框寬度變為3px。在100%處，元素旋轉回到原始的位置，邊框寬度變回5px。

最后，我們將這個動畫綁定到了loading:after元素上，設置了1s的循環時間，并以ease-in-out方式運動。

通過以上的代碼，我們就實現了一個簡單的圓形加載動畫。在實際的項目中，我們還可以根據需求進行改動，比如更改動畫的顏色、大小等，以實現更多炫酷的效果。