CSS實現頁面畫圈加載

現在很多網站都喜歡在頁面上使用圓圈圖標來表示頁面加載的進度。如果你也想在你的網站上實現這樣的效果，那么可以使用CSS來完成。

下面是一個簡單的示例，在頁面上使用CSS實現圓圈加載的效果：

<div class="circle"></div>
<style>
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #007cd5;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

以上代碼中，我們創建了一個圓圈 div 容器，并使用 CSS 設置了圓圈的大小、形狀和顏色等樣式。同時，我們還使用了 animation 屬性來添加了一個旋轉動畫效果，通過這個動畫，我們就成功的實現了一個簡單的圓圈加載效果。

如果你想進一步完善這個效果，可以借助 CSS 中更多的動畫屬性，比如 transition 和 transform 等，來實現更加豐富、酷炫的圓圈加載效果。希望本文對你有所幫助！