CSS进度条是一种常见的Web开发技巧，它可以让用户对任务的进度有一个直观的感知。在这里，我们将为大家介绍如何在CSS中创建一个简单的进度条。 首先，我们需要为进度条设置一个容器元素，例如一个div。我们给这个div添加一个类名“progress”，并设置其宽度和高度，以及进度条的背景颜色和边框。

.progress {
width: 100%;
height: 25px;
background-color: #f2f2f2;
border-radius: 5px;
border: 1px solid #ddd;
}

接着，我们需要创建一个表示进度的元素，例如一个span。我们将span添加为div的子元素，然后为其设置类名“progress-bar”。我们将span的宽度设置为“0%”，这意味着初始状态下进度条是空白的。

.progress .progress-bar {
width: 0%;
height: 100%;
background-color: #4CAF50;
border-radius: 5px;
}

为了使进度条更加有趣，我们可以在CSS中添加动画效果。我们可以使用CSS的“@keyframes”规则来定义一个动画序列，以改变进度条的宽度。在下面的代码中，我们定义一个名为“progress”、持续时间为2秒的动画序列，它会在执行时将进度条的宽度从0%增加到100%。

.progress .progress-bar {
animation: progress 2s;
}
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}

最后，我们可以在HTML中添加一个按钮元素，当用户点击该按钮时触发动画效果。我们将按钮的事件处理程序设置为切换进度条类名“active”，从而启动或停止动画。

<div class="progress">
<span class="progress-bar"></span>
</div>
<button onclick="document.querySelector('.progress-bar').classList.toggle('active')">启动</button>

通过CSS进度条，我们可以轻松地为网站添加一个漂亮的任务进度指示器。此外，由于这种技术是使用CSS构建的，所以它易于修改和定制，您可以根据自己的需求调整颜色、样式和动画效果。