CSS 自制进度条：简单易行，代码示例

<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 来更新进度条的宽度，实现一个自制的进度条。