CSS進度圓形是一種常見的UI設計元素，它可以用于展示各種進度信息，例如任務進度、上傳下載進度等等。下面我們來介紹一下如何使用CSS生成進度圓形。

.progress {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #ddd;
overflow: hidden;
}
.progress::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 100px, 200px, 0);
background: linear-gradient(to bottom, #f00 20%, #ddd 20%);
transform: rotate(45deg);
}
.progress::after {
content: attr(data-progress) '%';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #444;
}

上述代碼中，我們首先定義了一個.progress類作為進度圓形的容器。容器需要設置寬度和高度，并設置border-radius為50%以實現圓形效果。然后使用overflow:hidden屬性隱藏容器內容的溢出部分。

接下來，在容器中插入兩個偽元素:before和:after。:before元素用于向容器中添加一個圓形裁剪區域，這個裁剪區域將根據進度百分比來動態變化。這里我們使用linear-gradient背景屬性實現漸變效果。:before元素還需要通過transform旋轉旋轉45度來實現從左下角開始的漸變效果。

:after元素用于顯示當前進度百分比，這里我們使用attr(data-progress)獲取到當前元素的data-progress屬性值，通過transform屬性將元素居中顯示，并設置一些基本的樣式如字體大小、顏色等。

至此，我們成功實現了一個基本的CSS進度圓形。你可以通過設置data-progress屬性的值來實現不同的進度效果。