当前位置：首页 > JavaScript

js进度条实现

2026-01-15 14:54:10JavaScript

使用HTML和CSS创建基础结构

在HTML中创建一个容器元素用于显示进度条，通常使用<div>元素。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;
  border-radius: 10px;
  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和async/await来控制进度条的更新。适用于文件上传或数据加载等场景。

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

simulateAsyncTask();

结合事件监听实现动态进度

通过事件监听（如文件上传或AJAX请求）动态更新进度条。例如，使用XMLHttpRequest的progress事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    progressBar.style.width = `${percentComplete}%`;
  }
};

xhr.onload = function() {
  progressBar.style.width = '100%';
};

xhr.send();

使用第三方库简化实现

如果需要更复杂的进度条（如动画或分段进度），可以使用第三方库如ProgressBar.js或NProgress。

安装NProgress：

npm install nprogress

使用示例：

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

NProgress.start();
setTimeout(() => NProgress.done(), 2000);

自定义进度条样式和动画

通过CSS可以进一步自定义进度条的样式，例如添加渐变、阴影或动画效果。

js进度条实现

.progress-bar {
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  animation: pulse 1.5s infinite;
}

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