CSS3提供了一個非常方便的方式，來繪制圓弧進度條。通過使用transform屬性，我們可以輕松地實現這種效果。以下是一個演示步驟。

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #eee;
position: relative;
overflow: hidden; /* 將溢出部分隱藏 */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffcb00;
transform-origin: 50% 50%;
transform: rotate(0deg);
}
.mask .fill {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}

首先，我們創建了一個圓形容器，用border-radius屬性將其變成圓形。然后，我們將其overflow屬性設置為hidden，以隱藏溢出部分。

接著，我們創建了一個用于遮罩的.mask類，它的position屬性設置為absolute，將其覆蓋在圓形容器上。它的transform-origin屬性設置為50% 50%，表示旋轉的中心點在容器中間。我們將其使用transform屬性沿著-90度的角度進行了旋轉，使它變成了一個扇形遮罩。

然后，我們創建了一個.fill類，它是表示進度的元素，也是一個position為absolute的元素，且它與.mask元素完全重合。它的背景顏色設為#ffcb00，表示進度條的填充色。我們將其transform-origin屬性設置為50% 50%，表示旋轉的中心點在容器中間。它的初始角度為0度。

最后，我們通過.mask .fill選擇器將.fill元素的右邊框設置為圓角。這是為了使進度條看起來更自然。

我們可以通過JavaScript腳本控制.fill元素的transform屬性來改變進度條的進度。具體操作是：根據所需的進度，計算出.fill元素的transform屬性的值，然后設置它即可。