jQuery UI API - 進度條部件（Progressbar Widget） · W3School jQuery UI 教程

# jQuery UI API - 進度條部件（Progressbar Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**顯示一個確定的或不確定的進程狀態。 **版本新增：**1.6 進度條被設計來顯示進度的當前完成百分比。進度條通過 CSS 編碼靈活調整大小，默認會縮放到適應父容器的大小。一個確定的進度條只能在系統可以準確更新當前狀態的情況下使用。一個確定的進度條不會從左向右填充，然后循環回到空 - 如果不能計算實際狀態，則使用不確定的進度條以便提供用戶反饋。 ### 主題化進度條部件（Progressbar Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用進度條指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-progressbar`：進度條的外層容器。該元素會為不確定的進度條另外添加一個 `ui-progressbar-indeterminate` class。 * `ui-progressbar-value`：該元素代表進度條的填充部分。 * `ui-progressbar-overlay`：用于為不確定的進度條顯示動畫的覆蓋層。 ### 依賴 * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例一個簡單的 jQuery UI 不確定的進度條（Indeterminate Progressbar）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>進度條部件（Progressbar Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="progressbar"></div> <script> $( "#progressbar" ).progressbar({ value: false }); </script> </body> </html> ```