js 进度条的实现

2026-02-28 17:52:51JavaScript

使用HTML和CSS创建基础结构

在HTML中创建一个容器元素用于显示进度条，例如<div class="progress-container">，内部嵌套一个表示当前进度的元素<div class="progress-bar">。CSS设置容器宽度、背景色，进度条初始宽度为0，通过过渡效果实现平滑动画。

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

<style>
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
}
.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}
</style>

通过JavaScript动态更新进度

使用setInterval或requestAnimationFrame定期更新进度条的宽度。例如，模拟从0%到100%的加载过程：

const progressBar = document.querySelector('.progress-bar');
let width = 0;
const interval = setInterval(() => {
  if (width >= 100) {
    clearInterval(interval);
  } else {
    width++;
    progressBar.style.width = `${width}%`;
  }
}, 50);

监听实际进度事件

对于文件上传或资源加载等场景，监听实际进度事件（如XMLHttpRequest的progress事件），动态计算并更新进度条：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'large-file.zip', true);
xhr.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    progressBar.style.width = `${percent}%`;
  }
};
xhr.send();

使用第三方库简化实现

若需复杂功能（如动画缓冲、多段进度），可引入第三方库如Progress.js或NProgress。以NProgress为例：

NProgress.start(); // 开始进度条
NProgress.set(0.5); // 设置进度为50%
NProgress.done(); // 完成并隐藏

响应式进度条设计

结合CSS媒体查询和JavaScript动态调整进度条样式。例如在小屏幕设备上减小高度：

@media (max-width: 600px) {
  .progress-bar {
    height: 10px;
  }
}

添加辅助信息显示

在进度条旁显示百分比文本或其他状态提示，增强用户体验：

const progressText = document.createElement('span');
progressContainer.appendChild(progressText);

// 更新时同步文本
progressBar.style.width = `${percent}%`;
progressText.textContent = `${Math.round(percent)}%`;