当前位置：首页 > news >正文

jQuery UI 实例 - 进度条（Progressbar）

news 2026/8/30 22:29:23

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>