仅仅使用 HTML/CSS 实现各类进度条的方式汇总

针对 “仅仅使用 HTML/CSS 实现各类进度条的方式汇总”，我给您提供以下的完整攻略：

1.通过 background 和 width 属性来实现

可以通过 background 和 width 属性来实现一个简单的进度条。首先，通过 CSS 样式将进度条的容器进行设置:

.progress {
    width: 300px;
    height: 20px;
    border: 1px solid #ccc;
}

然后通过 background 和 width 属性来控制进度条内的颜色和长度：

.progress .bar {
    height: 100%;
    background: #00ff00;
    width: 50%;
}

完整示例代码如下：

<div class="progress">
  <div class="bar" style="width: 50%"></div>
</div>

2.通过伪元素实现

我们可以使用伪元素实现更加符合人们期待的进度条。 首先定义进度条容器背景，进度条元素也就是伪元素， 增加动画的效果往往能够给人以更好的视觉效果，这里我使用了transition来实现平滑过渡。

.progress {
  width: 300px;
  height: 10px;
  border: 1px solid #ccc;
  background: #f1f1f1;
  position: relative;
}

.progress:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: green;
  transition: width 0.5s ease-in-out;
}

然后，使用 JS 来修改伪元素的宽度：

document.addEventListener("DOMContentLoaded", function(event) {
    const progressContainer = document.querySelector('.progress');
    const progressBar = document.querySelector('.progress:after');
    const btn = document.querySelector('button');
    let progressValue = 0;
    const increaseProgress = () => {
        progressValue = Math.min(progressValue + 10, 100);
        if (progressValue === 100) {
            btn.innerText = 'Complete';
        }
        progressBar.style.width = `${progressValue}%`;
    }
    btn.addEventListener('click', increaseProgress)
});

完整示例代码如下：

<div class="progress">
</div>
<button>Start</button>
<style>
.progress {
  width: 300px;
  height: 10px;
  border: 1px solid #ccc;
  background: #f1f1f1;
  position: relative;
}

.progress:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: green;
  transition: width 0.5s ease-in-out;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    const progressContainer = document.querySelector('.progress');
    const progressBar = document.querySelector('.progress:after');
    const btn = document.querySelector('button');
    let progressValue = 0;
    const increaseProgress = () => {
        progressValue = Math.min(progressValue + 10, 100);
        if (progressValue === 100) {
            btn.innerText = 'Complete';
        }
        progressBar.style.width = `${progressValue}%`;
    }
    btn.addEventListener('click', increaseProgress)
});
</script>

通过上述两个示例，我们可以看到使用 HTML/CSS 可以实现多种进度条，包括基本的进度条和带有动画效果的进度条。