CSS圓圈加載進度樣式可以增添網(wǎng)頁的動感和美觀度，下面將介紹一種簡單實用的CSS圓圈加載進度樣式。

.progress {
position: relative;
width: 50px;
height: 50px;
margin: 50px auto;
}
.progress:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 8px solid #ccc;
}
.progress:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
border: 8px solid #f3a500;
border-top-color: transparent;
border-right-color: transparent;
animation: spin 1s ease infinite;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

解析：

1.創(chuàng)建一個 div 元素，添加 class="progress"。設置該元素的寬度、高度及邊距屬性。

2.使用偽元素 :before 和 :after 為圓圈加載進度樣式添加邊框。

3.使用 transform 屬性指定旋轉(zhuǎn)的度數(shù)，在 animation 屬性中定義動畫，將其無限旋轉(zhuǎn)，從而實現(xiàn)加載進度的效果。

該樣式非常簡單且實用，可作為網(wǎng)頁加載等待時的動畫效果。