CSS是現代網頁設計不可或缺的一部分，它能夠處理各種復雜的設計效果，其中之一就是圓形進度條。

在CSS中，我們可以使用一些技巧來制作出一種漂亮的圓形進度條，其中最基礎的方法是通過設置 border-radius來創建一個圓形。

.progress{
border: 6px solid #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
}

接下來，我們需要設置一個內部的進度條，在這個進度條內，我們可以使用長方形的元素來模擬一個進度條，最后通過設置它的寬度和位置來控制進度的變化。

.progress{
border: 6px solid #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
position: relative;
}
.progress .progress-bar{
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
right: 6px;
background-color: #f00;
}

現在，我們已經創建好了進度條的外部和內部，接下來需要設置進度條變化的動畫效果，通過使用CSS3中的 transform 屬性，我們可以讓進度條按照比例縮放。

@keyframes progress {
from { transform: rotate(-90deg); }
to { transform: rotate(calc(1turn * var(--pct))); }
}
.progress .progress-bar{
animation: progress 1s linear;
}

最后，我們只需要在HTML中通過設置自定義屬性來控制進度條的比例。

這就是如何使用純CSS創建一個簡單的圓形進度條，你可以嘗試在不同的項目中使用它，加強你的頁面效果。