jQuery UI Progressbar（进度条）实例
Progressbar 是 jQuery UI 中用于显示进度（如文件上传、任务处理、加载状态）的简单组件。支持确定性进度（0-100%）、不确定性加载（indeterminate）、动态更新、显示百分比标签等。常用于上传进度、下载条、步骤指示。
官方演示地址：https://jqueryui.com/progressbar/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础进度条
固定进度值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="progressbar"></div>
<script>
$(function() {
$("#progressbar").progressbar({
value: 65 // 进度值 0-100
});
});
</script>
</body>
</html>2. 不确定性加载条（Indeterminate）
用于未知进度（如加载中），显示流动动画。
<div id="indeterminate"></div>
<script>
$("#indeterminate").progressbar({
value: false // false 表示 indeterminate
});
</script>3. 显示百分比标签 + 动态更新
实时显示进度百分比，并通过按钮模拟进度增加。
<div id="progressbar-label"><div class="progress-label">加载中...</div></div>
<button id="start">开始进度</button>
<style>
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
var progressbar = $("#progressbar-label");
var progressLabel = $(".progress-label");
progressbar.progressbar({
value: 0,
change: function() { // 进度变化时更新标签
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function() { // 完成时
progressLabel.text("完成！");
}
});
$("#start").click(function() {
var val = 0;
var timer = setInterval(function() {
val += 5;
progressbar.progressbar("value", val);
if (val >= 100) clearInterval(timer);
}, 200);
});
</script>4. 事件监听 + 自定义样式
<script>
$("#progressbar").progressbar({
change: function(event, ui) {
console.log("当前进度：" + ui.value + "%");
},
complete: function() {
console.log("进度完成");
}
});
</script>
<style>
/* 自定义进度条颜色 */
.ui-progressbar-value {
background: #4CAF50; /* 绿色填充 */
}
</style>小技巧：
- 动态设置进度：
$("#progressbar").progressbar("value", 50); - 获取当前值：
$("#progressbar").progressbar("value"); - 禁用：
$("#progressbar").progressbar("disable"); - 高度调整：通过 CSS
.ui-progressbar { height: 20px; }
Progressbar 适合文件上传进度（结合 Ajax）、步骤向导等。如果你需要 文件上传进度条完整示例、圆形进度条（需第三方插件），或 多进度条组合，请提供更多细节！
