基础 CSS 进度条原生

本文介绍如何使用基础 CSS 实现原生的进度条样式，无需借助任何第三方插件或库。这种方法简单易懂，适合新手学习和应用到各种场景中。

原理

进度条由两个元素组成，分别是进度条的容器和进度条本身。容器用于定义进度条的整体样式，比如背景颜色、高度等；进度条则根据进度的变化而实时改变其宽度。

HTML 结构

使用原生 CSS 实现的进度条，HTML 结构非常简单，只需要两个元素即可。

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

其中，.progress-bar 是进度条的容器，.progress 是进度条本身。

CSS 样式

下面是实现进度条样式的 CSS 代码。样式中使用了灵活的百分比单位，可以适应不同长度的进度条。

/* 容器样式 */
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
}

/* 进度条样式 */
.progress {
  height: 20px;
  border-radius: 10px;
  background-color: #4CAF50;
  width: 0%; /* 初始宽度为 0 */
  transition: width 0.5s ease-in-out; /* 添加过渡效果 */
}

JavaScript 控制进度条的进度

JavaScript 可以使用 DOM 操作来控制进度条的进度。以下示例演示如何每秒增加进度条的宽度，直到达到 100%。

// 获取进度条元素
let progress = document.querySelector('.progress');

let width = 0; // 初始宽度为 0
let interval = setInterval(() => {
  width++; // 每次增加 1%
  progress.style.width = `${width}%`; // 设置进度条宽度
  if (width === 100) {
    clearInterval(interval); // 达到 100% 后停止循环
  }
}, 10); // 10ms 执行一次，实现平滑过渡效果。

结语

本文介绍了如何使用基础 CSS 实现原生的进度条样式，以及如何使用 JavaScript 控制进度条的进度。这种方法简单易懂，适合新手学习和应用到各种场景中。