显示一个确定的或不确定的进程状态。
如需了解更多有关 progressbar 部件的细节，请查看 API 文档 进度条部件（Progressbar Widget）。
默认功能
默认的确定的进度条。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 默认功能</title> <link rel="stylesheet" href="https://zhishitu.com/"> <script src="/images/2021/06/11/202106110417492228900.js"></script> <script src="/images/2021/06/11/202106110417492231391.js"></script> <link rel="stylesheet" href="https://zhishitu.com/"> <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script></head><body> <div id="progressbar"></div> </body></html>自定义标签
自定义更新的标签。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 自定义标签</title> <link rel="stylesheet" href="https://zhishitu.com/"> <script src="/images/2021/06/11/202106110417492228900.js"></script> <script src="/images/2021/06/11/202106110417492231391.js"></script> <link rel="stylesheet" href="https://zhishitu.com/"> <style> .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } </style> <script> $(function() { var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" ); progressbar.progressbar({ value: false, change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); }, complete: function() { progressLabel.text( "完成！" ); } }); function progress() { var val = progressbar.progressbar( "value" ) || 0; progressbar.progressbar( "value", val + 1 ); if ( val < 99 ) { setTimeout( progress, 100 ); } } setTimeout( progress, 3000 ); }); </script></head><body> <div id="progressbar"><div class="progress-label">加载...</div></div> </body></html>不确定的值
不确定的进度条，并可在确定和不确定的样式之间切换。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 不确定的值</title> <link rel="stylesheet" href="https://zhishitu.com/"> <script src="/images/2021/06/11/202106110417492228900.js"></script> <script src="/images/2021/06/11/202106110417492231391.js"></script> <link rel="stylesheet" href="https://zhishitu.com/"> <script> $(function() { $( "#progressbar" ).progressbar({ value: false }); $( "button" ).on( "click", function( event ) { var target = $( event.target ), progressbar = $( "#progressbar" ), progressbarValue = progressbar.find( ".ui-progressbar-value" ); if ( target.is( "#numButton" ) ) { progressbar.progressbar( "option", { value: Math.floor( Math.random() * 100 ) }); } else if ( target.is( "#colorButton" ) ) { progressbarValue.css({ "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 ) }); } else if ( target.is( "#falseButton" ) ) { progressbar.progressbar( "option", "value", false ); } }); }); </script> <style> #progressbar .ui-progressbar-value { background-color: #ccc; } </style></head><body> <div id="progressbar"></div><button id="numButton">随机值 - 确定</button><button id="falseButton">不确定</button><button id="colorButton">随机颜色</button> </body></html>