jQuery UI Progressbar（进度条）实例
Progressbar是 jQuery UI 中用于显示进度（如文件上传、任务处理、加载状态）的简单组件。支持确定性进度（0-100%）、不确定性加载（indeterminate）、动态更新、显示百分比标签等。常用于上传进度、下载条、步骤指示。
官方演示地址：https://jqueryui.com/progressbar/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础进度条
固定进度值。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Progressbar 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><divid="progressbar"></div><script>$(function(){$("#progressbar").progressbar({value:65// 进度值 0-100});});</script></body></html>2.不确定性加载条（Indeterminate）
用于未知进度（如加载中），显示流动动画。
<divid="indeterminate"></div><script>$("#indeterminate").progressbar({value:false// false 表示 indeterminate});</script>3.显示百分比标签 + 动态更新
实时显示进度百分比，并通过按钮模拟进度增加。
<divid="progressbar-label"><divclass="progress-label">加载中...</div></div><buttonid="start">开始进度</button><style>.progress-label{position:absolute;left:50%;top:4px;font-weight:bold;text-shadow:1px 1px 0 #fff;}</style><script>varprogressbar=$("#progressbar-label");varprogressLabel=$(".progress-label");progressbar.progressbar({value:0,change:function(){// 进度变化时更新标签progressLabel.text(progressbar.progressbar("value")+"%");},complete:function(){// 完成时progressLabel.text("完成！");}});$("#start").click(function(){varval=0;vartimer=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）、步骤向导等。如果你需要文件上传进度条完整示例、圆形进度条（需第三方插件），或多进度条组合，请提供更多细节！
