jQuery进度条

动态更新进度条，模拟任务加载或上传进度，支持动画和百分比显示。 · 难度：入门 · +15XP

jQuery进度条

进度条（Progress Bar）用于显示任务的完成百分比，常见于文件上传、数据加载等场景。通过jQuery可以轻松控制进度条的宽度和文本。

实现方法

使用一个容器div作为轨道，内部div作为填充条。通过.width()或.css('width')动态设置填充比例，并更新文本显示百分比。

示例代码

function updateProgress(percent) {
  $('#progress-fill').width(percent + '%');
  $('#progress-text').text(percent + '%');
}
// 模拟加载
var p = 0;
var interval = setInterval(function() {
  p += 10;
  updateProgress(p);
  if (p >= 100) clearInterval(interval);
}, 500);

样式建议

练习提示

在右侧代码中，添加一个“重置”按钮，将进度条重置为0%。