js实现动态进度条

2026-02-28 21:37:12JavaScript

使用HTML和CSS创建基础结构

在HTML中创建一个容器元素和一个进度条元素。CSS用于设置进度条的样式和初始状态。

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

.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或requestAnimationFrame来实现平滑的动画效果。

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

function updateProgress() {
  progress += 1;
  progressBar.style.width = `${progress}%`;

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

const interval = setInterval(updateProgress, 50);

基于实际任务进度更新

如果需要根据实际任务进度更新进度条，可以监听任务进度事件并更新进度条。

function simulateTask(callback) {
  let progress = 0;
  const taskInterval = setInterval(() => {
    progress += 10;
    callback(progress);

    if (progress >= 100) {
      clearInterval(taskInterval);
    }
  }, 500);
}

simulateTask((progress) => {
  progressBar.style.width = `${progress}%`;
});

使用Promise和Async/Await

结合Promise和Async/Await可以更优雅地处理异步任务的进度更新。

async function runTask() {
  for (let i = 0; i <= 100; i += 10) {
    await new Promise(resolve => setTimeout(resolve, 500));
    progressBar.style.width = `${i}%`;
  }
}

runTask();

添加动画效果

通过CSS的transition属性或JavaScript的动画库（如GSAP）可以增强进度条的动画效果。

.progress-bar {
  transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

响应式进度条

确保进度条在不同屏幕尺寸下都能正常工作，可以通过CSS的百分比宽度和媒体查询实现。

.progress-container {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .progress-container {
    width: 90%;
  }
}

动态颜色变化

根据进度值动态改变进度条颜色，可以使用JavaScript修改CSS变量或直接设置样式。

function updateProgressColor(progress) {
  if (progress < 30) {
    progressBar.style.backgroundColor = '#FF5722';
  } else if (progress < 70) {
    progressBar.style.backgroundColor = '#FFC107';
  } else {
    progressBar.style.backgroundColor = '#4CAF50';
  }
}

完整示例

以下是一个完整的动态进度条实现示例，结合了上述方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Progress Bar</title>
  <style>
    .progress-container {
      width: 80%;
      height: 20px;
      background-color: #f0f0f0;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px auto;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: #4CAF50;
      transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
  </style>
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
  </div>
  <button id="startButton">Start Progress</button>

  <script>
    const progressBar = document.getElementById('progressBar');
    const startButton = document.getElementById('startButton');

    startButton.addEventListener('click', async () => {
      progressBar.style.width = '0%';
      await runTask();
    });

    async function runTask() {
      for (let i = 0; i <= 100; i += 10) {
        await new Promise(resolve => setTimeout(resolve, 500));
        progressBar.style.width = `${i}%`;
        updateProgressColor(i);
      }
    }

    function updateProgressColor(progress) {
      if (progress < 30) {
        progressBar.style.backgroundColor = '#FF5722';
      } else if (progress < 70) {
        progressBar.style.backgroundColor = '#FFC107';
      } else {
        progressBar.style.backgroundColor = '#4CAF50';
      }
    }
  </script>
</body>
</html>

js实现动态进度条