js 实现进度条
使用 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 动态更新进度
使用 setInterval 模拟进度增长，实际应用中可替换为真实任务进度（如文件上传、数据处理）：
const progressBar = document.getElementById('progressBar');
let progress = 0;
const interval = setInterval(() => {
progress += 1;
progressBar.style.width = `${progress}%`;
if (progress >= 100) clearInterval(interval);
}, 50);使用 Promise 或异步任务控制进度
结合异步操作（如 fetch）时，可通过事件监听更新进度：
function simulateAsyncProgress() {
return new Promise((resolve) => {
const totalSteps = 100;
let currentStep = 0;
const update = () => {
currentStep += 1;
progressBar.style.width = `${currentStep}%`;
if (currentStep < totalSteps) setTimeout(update, 50);
else resolve();
};
update();
});
}
simulateAsyncProgress().then(() => console.log('完成'));响应式进度条（基于实际任务）
对于文件上传等场景，利用 XMLHttpRequest 或 fetch 的进度事件：
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percent = (event.loaded / event.total) * 100;
progressBar.style.width = `${percent}%`;
}
});
xhr.open('POST', '/upload', true);
xhr.send(formData);添加动画和状态提示
通过 CSS 动画增强交互体验，例如完成时变色：
.progress-bar.completed {
background-color: #2196F3;
}JavaScript 中动态添加类名：
if (progress >= 100) {
progressBar.classList.add('completed');
}注意事项
- 进度单位需标准化为 0-100%，便于计算和显示。
- 清除定时器或事件监听防止内存泄漏。
- 实际任务中需处理错误状态，如上传失败时重置进度条。
