css做的进度条

CSS可以实现很多有趣的效果，其中进度条也是很常见的一种。进度条可以用于展示一个任务的完成度，非常直观。而且，用CSS实现进度条非常简单，接下来我们就来详细讲解。

.progress {
  width: 300px;
  height: 20px;
  background-color: #eee;
}

.progress-bar {
  width: 50%;
  height: 100%;
  background-color: #f00;
}

我们先来看一下代码。上面的代码中，我们创建了一个容器，类名为"progress"，设置了该容器的宽度为300px，高度为20px，背景颜色为灰色。在容器中，我们再创建一个子元素，类名为"progress-bar"，设置了该子元素的宽度为50%，高度为100%，背景颜色为红色。

接下来，我们需要通过JS来修改进度条的宽度，展示任务的完成度。

const progress = document.querySelector(".progress-bar");
const completed = 50;  // 任务已完成50%
progress.style.width = completed + "%";

上面的代码中，我们首先使用querySelector方法来获取到进度条元素。然后，我们设置变量completed，表示任务已完成的百分比，我们这里假设为50。最后，我们将进度条的宽度设置为completed + "%"，并将进度展示出来。

以上就是用CSS实现进度条的全部内容了。从代码可以看出，实现进度条的过程非常简单。通过设置容器和子元素的样式，再通过JS来修改进度条的宽度，就可以实现一个漂亮的进度条了。