js 实现进度条

2026-04-03 23:57:24JavaScript

使用HTML和CSS创建基础结构

进度条通常由两个主要部分组成：一个外部容器和一个内部填充条。HTML结构可以简单如下：

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

CSS样式用于定义进度条的外观：

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

使用JavaScript更新进度

通过JavaScript可以动态更新进度条的宽度。以下是一个基本实现：

function updateProgress(percent) {
  const progressBar = document.getElementById('progressBar');
  progressBar.style.width = percent + '%';
}

// 示例：更新进度到75%
updateProgress(75);

动画效果实现

如果需要平滑的动画效果，可以利用CSS的transition属性。在上面的CSS中已经添加了transition: width 0.3s ease;，这样当宽度变化时会自动产生动画效果。

动态加载进度模拟

模拟文件上传或加载过程的动态进度更新：

let progress = 0;
const interval = setInterval(() => {
  progress += 1;
  updateProgress(progress);

  if (progress >= 100) {
    clearInterval(interval);
  }
}, 50);

使用Promise实现异步进度更新

对于异步操作，可以结合Promise使用：

function simulateAsyncOperation() {
  return new Promise((resolve) => {
    let progress = 0;
    const interval = setInterval(() => {
      progress += 5;
      updateProgress(progress);

      if (progress >= 100) {
        clearInterval(interval);
        resolve();
      }
    }, 200);
  });
}

simulateAsyncOperation().then(() => {
  console.log('操作完成');
});

圆形进度条实现

如果需要圆形进度条，可以使用SVG或Canvas实现。以下是SVG实现示例：

<svg class="circular-progress" viewBox="0 0 100 100">
  <circle class="progress-bg" cx="50" cy="50" r="45"/>
  <circle class="progress-fill" cx="50" cy="50" r="45"/>
</svg>

.circular-progress {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}

.progress-bg {
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
}

.progress-fill {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 10;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.3s ease;
}

function updateCircularProgress(percent) {
  const circumference = 2 * Math.PI * 45;
  const offset = circumference - (percent / 100) * circumference;
  document.querySelector('.progress-fill').style.strokeDashoffset = offset;
}