css 自制一个progress

要自制一个进度条，可以使用CSS的width属性来控制进度条的宽度，并配合transition属性来实现平滑的过渡效果。

首先，需要创建一个HTML元素作为进度条的容器，可以使用<div>标签，并为其添加一个唯一的ID，例如progress-bar：

<div id="progress-bar"></div>

接下来，在CSS中设置进度条的样式。可以使用background-color属性来设置进度条的背景颜色，使用width属性来设置初始的进度条宽度，使用transition属性来设置过渡效果的时间：

#progress-bar {
  background-color: #ddd;
  width: 0%;
  height: 20px;
  transition: width 0.5s ease-in-out;
}

然后，使用JavaScript获取进度条容器的引用，并根据进度更新其宽度。可以使用getElementById方法获取元素引用，并使用style属性的width属性来设置进度条的宽度。

var progressBar = document.getElementById('progress-bar');

function updateProgress(progress) {
  progressBar.style.width = progress + '%';
}

最后，调用updateProgress函数来更新进度条的宽度，传入一个介于0到100之间的进度值：

updateProgress(50); // 更新进度为50%

这样就可以通过JavaScript来更新进度条的宽度，实现一个自制的进度条