CSS3有很多有趣的特性，比如我們今天要講的圓形loading。通過CSS3中的animation動畫和border-radius屬性，可以輕松制作一個漂亮的loading效果。

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

我們先來看看CSS3制作圓形loading的基礎樣式。這里我們使用了border屬性來創建一個圓形的邊框，并使用border-radius屬性將其設置為圓形。我們設置的寬度和高度為120px，可以根據實際需求進行調整。最后，我們使用animation屬性來添加一個spin動畫，實現loading旋轉的效果。

接下來，我們來解釋一下spin動畫的過程。具體來說，spin動畫是通過關鍵幀@keyframes來實現的。我們先設置0%的狀態為rotate(0deg)，也就是loading的初始狀態，然后在100%時設置rotate(360deg)，也就是loading經過一個完整的旋轉后的狀態。通過linear屬性，我們使其呈現平滑的旋轉效果。最后，我們將這個動畫設置為無限循環。

當我們將其嵌入到網站中時，我們只需要將上述代碼復制到任何一個CSS文件中即可。并將底部的HTML代碼嵌入到需要添加loading效果的頁面中。接下來，您就能看到一個漂亮的圓形loading啦！

是不是很簡單？使用CSS3制作圓形loading，代碼短小精悍，易于上手，還能提升用戶體驗。期待您在您的網站中添加這個效果。