js进度条实现

2026-04-03 21:44:08JavaScript

使用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动态更新进度条的宽度。可以通过定时器或事件触发来模拟进度变化。

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

function updateProgress() {
  progress += 10;
  if (progress > 100) {
    progress = 100;
  }
  progressBar.style.width = progress + '%';
}

// 模拟进度更新
setInterval(updateProgress, 1000);

使用Promise和异步加载

结合Promise和异步操作实现更真实的进度控制，例如文件上传或数据加载。

function simulateAsyncTask() {
  return new Promise((resolve) => {
    const interval = setInterval(() => {
      progress += 5;
      progressBar.style.width = progress + '%';
      if (progress >= 100) {
        clearInterval(interval);
        resolve();
      }
    }, 300);
  });
}

simulateAsyncTask().then(() => {
  console.log('任务完成');
});

动态计算进度

根据实际任务（如文件上传）动态计算进度，使用XMLHttpRequest或fetch的进度事件。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload-url');
xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    progressBar.style.width = percent + '%';
  }
};
xhr.send(formData);

使用第三方库简化实现

使用如ProgressBar.js或NProgress等库快速实现高级进度条效果。

// 使用NProgress示例
NProgress.start();
setTimeout(() => NProgress.done(), 2000);

自定义动画和样式

通过CSS动画或JavaScript增强进度条的视觉效果，如添加渐变或平滑过渡。

js进度条实现

.progress-bar {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}