CSS進度圓是一種實現頁面進度展示的優秀方法，這種方法通常用于網站的加載進度、表單提交進度等場景，能夠幫助用戶更加清晰地了解當前的進度。

/* CSS進度圓樣式代碼 */
.progress-circle {
margin: 20px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #ebebeb;
position: relative;
}
.progress-circle:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: inherit;
background-color: #1e9be9;
transform-origin: center center;
transform: rotate(0deg);
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.progress-circle:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #1e9be9;
}
/* 設置進度 */
.progress-circle[data-progress="25"]:before {
transform: rotate(90deg);
}
.progress-circle[data-progress="50"]:before {
transform: rotate(180deg);
}
.progress-circle[data-progress="75"]:before {
transform: rotate(270deg);
}
.progress-circle[data-progress="100"]:before {
transform: rotate(360deg);
}
.progress-circle[data-progress="0"]:after {
content: "0%";
}
.progress-circle[data-progress="25"]:after {
content: "25%";
}
.progress-circle[data-progress="50"]:after {
content: "50%";
}
.progress-circle[data-progress="75"]:after {
content: "75%";
}
.progress-circle[data-progress="100"]:after {
content: "100%";
}

上述代碼實現了一個進度圓的效果。首先我們創建了一個基礎樣式，即圓形元素，并使用偽元素來實現進度效果。通過設置偽元素的rotate屬性，可以控制進度條的旋轉角度，從而實現不同程度的進度展示。最后，我們再通過對圓形元素進行after偽元素的設置，來展示當前的進度數值。