进度条 Progress
进度条用于显示任务完成进度的可视化组件。
基础用法
基础进度条
html
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" data-progress="60"></div>
</div>
</div>
预览效果:
带文字的进度条
html
<div class="progress-container">
<label class="progress-label">下载进度 - 75%</label>
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" data-progress="75"></div>
</div>
</div>
</div>
预览效果:
进度条状态
成功状态
html
<div class="glass-progress success">
<div class="progress-track">
<div class="progress-fill" style="width: 100%;"></div>
</div>
</div>
警告状态
html
<div class="glass-progress warning">
<div class="progress-track">
<div class="progress-fill" style="width: 75%;"></div>
</div>
</div>
错误状态
html
<div class="glass-progress error">
<div class="progress-track">
<div class="progress-fill" style="width: 25%;"></div>
</div>
</div>
CSS 类名
基础类名
.glass-progress
- 进度条容器.progress-track
- 进度条轨道.progress-fill
- 进度条填充.progress-text
- 进度条文字
修饰类名
状态修饰符
.success
- 成功状态.warning
- 警告状态.error
- 错误状态
JavaScript 增强
进度控制
javascript
class ProgressBar {
constructor(element) {
this.container = element;
this.fill = element.querySelector('.progress-fill');
this.text = element.querySelector('.progress-text');
this.currentValue = 0;
}
setValue(value) {
this.currentValue = Math.max(0, Math.min(100, value));
this.fill.style.width = this.currentValue + '%';
if (this.text) {
this.text.textContent = Math.round(this.currentValue) + '%';
}
}
animate(targetValue, duration = 1000) {
const startValue = this.currentValue;
const startTime = Date.now();
const update = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const current = startValue + (targetValue - startValue) * progress;
this.setValue(current);
if (progress < 1) {
requestAnimationFrame(update);
}
};
requestAnimationFrame(update);
}
}
// 使用示例
const progressBar = new ProgressBar(document.querySelector('.glass-progress'));
progressBar.animate(75);
自动进度模拟
javascript
function simulateProgress(progressElement, duration = 3000) {
const progressBar = new ProgressBar(progressElement);
const steps = 100;
const stepDuration = duration / steps;
let current = 0;
const interval = setInterval(() => {
current += Math.random() * 3;
if (current >= 100) {
current = 100;
progressBar.setValue(current);
clearInterval(interval);
} else {
progressBar.setValue(current);
}
}, stepDuration);
}
应用场景
文件上传
html
<div class="upload-progress">
<div class="file-info">
<span>document.pdf</span>
<span>2.5 MB</span>
</div>
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" style="width: 35%;"></div>
</div>
<div class="progress-text">35%</div>
</div>
</div>
任务完成度
html
<div class="task-progress">
<h4>项目进度</h4>
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" style="width: 68%;"></div>
</div>
<div class="progress-text">68%</div>
</div>
<p>已完成 17/25 个任务</p>
</div>
技能水平
html
<div class="skill-set">
<div class="skill-item">
<label>JavaScript</label>
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" style="width: 90%;"></div>
</div>
</div>
</div>
<div class="skill-item">
<label>CSS</label>
<div class="glass-progress">
<div class="progress-track">
<div class="progress-fill" style="width: 85%;"></div>
</div>
</div>
</div>
</div>