js实现动态进度条

2026-04-03 22:03:23JavaScript

实现动态进度条的方法

使用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动态更新进度条的宽度。可以使用setInterval模拟进度变化。

const progressBar = document.getElementById('progressBar');
let progress = 0;

function updateProgress() {
  if (progress < 100) {
    progress += 1;
    progressBar.style.width = `${progress}%`;
  } else {
    clearInterval(interval);
  }
}

const interval = setInterval(updateProgress, 50);

根据实际任务更新进度

如果进度条需要反映实际任务的进度，可以绑定到事件或异步操作。

function simulateTask() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 1000);
  });
}

async function runTask() {
  for (let i = 0; i <= 100; i += 10) {
    await simulateTask();
    progressBar.style.width = `${i}%`;
  }
}

runTask();

添加动画效果

使用CSS的transition属性或JavaScript的requestAnimationFrame实现平滑动画。

function animateProgress(target) {
  const currentWidth = parseFloat(progressBar.style.width) || 0;
  const step = (target - currentWidth) / 10;

  function frame() {
    if (currentWidth < target) {
      progressBar.style.width = `${currentWidth + step}%`;
      requestAnimationFrame(frame);
    }
  }

  requestAnimationFrame(frame);
}

animateProgress(75);

响应式进度条

结合事件监听器，根据用户交互或数据加载更新进度。

js实现动态进度条

document.addEventListener('DOMContentLoaded', () => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      const progress = data.progress; // 假设API返回进度值
      progressBar.style.width = `${progress}%`;
    });
});