CSS任务进度条是网页设计中经常使用的一种元素，它可以帮助用户更直观地了解当前任务的完成情况和进度。下面我们将介绍如何使用CSS来实现一个简单的任务进度条：

/* CSS样式 */
.task-progress {
height: 20px;
background-color: #f2f2f2;
position: relative;
border-radius: 10px;
}
.task-progress-bar {
height: 100%;
background-color: #4caf50;
position: absolute;
border-radius: 10px;
}
.task-progress-text {
font-size: 16px;
font-weight: bold;
color: #333;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先创建一个div元素，并设置它的高度为20px，背景颜色为灰色，圆角为10px，命名为.task-progress。然后在.task-progress中创建一个子元素div，命名为.task-progress-bar，用来表示任务的进度。.task-progress-bar元素的高度为100%，宽度通过JS动态计算并设置，背景颜色为绿色，也有圆角为10px。最后创建一个span元素，命名为.task-progress-text，用于在进度条中心显示任务的完成百分比，样式为加粗、居中、黑色。

0%

最后，我们需要编写JavaScript代码，用来根据任务的完成情况来动态改变进度条的宽度和显示的完成百分比：

// JavaScript代码
var progressBar = document.querySelector('.task-progress-bar');
var progressText = document.querySelector('.task-progress-text');
var currentProgress = 0; // 当前完成百分比
// 模拟任务完成过程
setInterval(function() {
currentProgress += 10; // 每次增加10%
progressBar.style.width = currentProgress + '%'; // 设置进度条宽度
progressText.innerText = currentProgress + '%'; // 显示完成百分比
}, 1000);

这段JavaScript代码模拟了任务的完成过程，每秒钟增加10%的完成量，然后动态改变进度条的宽度和显示的完成百分比。

通过CSS样式和JavaScript代码的结合，我们就可以轻松地实现一个简单的任务进度条了。