CSS3提供了一種簡單又優美的方法來創建空心圓環進度條。

/*基礎樣式*/
.progress {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
/*外環*/
.progress::before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #ccc;
position: absolute;
}
/*進度條*/
.progress::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #000;
position: absolute;
clip: rect(0, 50px, 100px, 0);
/*設置進度條起點為0，終點為50px，即50%*/
}
/*動態效果*/
.progress.active::after {
animation: progress 2s linear forwards;
/*動畫名稱、動畫持續時間、動畫速度、動畫結束后保持最后結束狀態*/
}
@keyframes progress {
from {
clip: rect(0, 0, 100px, 0);
/*從0%開始*/
}
to {
clip: rect(0, 100px, 100px, 0);
/*以100%結束*/
}
}

以上代碼中，我們首先定義了一個基礎的.progress樣式來設置空心圓環的寬高和圓角，然后使用偽類:before和:after來分別創建外環和進度條。在進度條樣式中，我們使用clip屬性來限制邊框的顯示區域，從而實現進度的動態效果。最后，在.active類中添加了進度條動畫，讓整個進度條呈現出流動的效果。

上述代碼僅僅是一個簡單的演示，您可以根據實際需求來調整樣式和動畫，從而實現更豐富的進度條效果。