在前端開發中，加載效果是一個非常常見的功能。其中，圓圈旋轉加載效果是一種簡單而又優美的效果。下面我們將介紹如何使用css實現該效果。

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

首先，我們創建一個類名為“circle-loader”的元素，并設置其基本屬性。它是一個圓形，寬和高都是20像素，邊框顏色為灰色。我們只設置頂部邊框的顏色為藍色，這樣就能產生旋轉的效果了。

接下來，我們定義了關鍵幀動畫“spin”，并將其應用到“circle-loader”元素上。這個動畫會讓圓圈旋轉360度，總時長為2秒，循環無限次。

最后，我們把這些代碼放到我們的網頁上，就能看到一個優美的圓圈旋轉加載效果了。