CSS 任務進度條是一個常用的網頁設計元素，可用于展示進度、完成度等信息。下面讓我們來學習一下如何使用 CSS 實現一個簡單的任務進度條。

<div class="progress">
<div class="bar bar-25"></div>
</div>
.progress {
width: 200px;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
.bar {
height: 100%;
border-radius: 10px;
background-color: #6ab04c;
}
.bar-25 {
width: 25%;
}

首先，我們創建了一個父級 div，設置它的寬度和高度，以及一個灰色的背景和圓角邊框。然后，我們在父級 div 中創建了一個子 div，這是用來表示進度的條形元素。我們為這個 div 添加了一個綠色的背景顏色和圓角邊框，還設置了它的高度為 100%。最后，我們為不同的任務進度條設置了不同的寬度。

以上就是使用 CSS 實現任務進度條的簡單示例，您可以根據項目需求自定義樣式，實現多樣化的任務進度條。