CSS圓圈進度條是一種常見的UI設計元素，在網頁和應用程序中廣泛應用。它通常用于顯示任務的完成度、下載進度、文件上傳等等，通過動態的變化來吸引用戶的注意力。本文將介紹如何使用CSS來創建一個簡單的圓圈進度條。

HTML代碼：
<div class="circle">
<div class="mask full"></div>
<div class="mask half"></div>
<div class="inside-circle">
<span class="percentage">50%</span>
</div>
</div>
CSS代碼：
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
background-color: #ddd;
border-radius: 50%;
}
.mask {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
border-radius: 50% 0 0 50%;
transform-origin: left;
}
.full {
background-color: #f00;
transform: rotate(180deg);
}
.half {
background-color: #ff0;
}
.inside-circle {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: #fff;
border-radius: 50%;
font-size: 18px;
text-align: center;
line-height: 50px;
}
.percentage {
display: block;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}

以上代碼中，HTML部分定義一個DIV，并設置了樣式名稱為.circle。其中包含了三個DIV，每個DIV分別設置了樣式名稱為mask full、mask half和inside-circle。同時，內部還嵌套了一個SPAN，樣式名稱為percentage。

CSS部分則是對HTML代碼中定義的樣式名稱進行詳細的屬性設置。例如，為了實現進度條的效果，我們在.full和.half樣式中，使用了transform屬性來控制元素的旋轉角度。同時，background-color屬性則是用來設置進度條的顏色。

通過以上代碼的設置，我們就成功地創建了一個簡單的圓圈進度條。用戶可以根據具體需要，進行樣式的修改和定制化，以實現更好的效果。