HTML <progress> 標簽

定義和用法

<progress> 標簽表示任務的完成進度。

提示：請始終添加 <label> 標簽 以獲得最佳可訪問性實踐！

另請參閱：

HTML DOM 參考手冊：Progress 對象

實例

顯示進度條：

<label for="file">下載進度：</label>
<progress id="file" value="32" max="100"> 32% </progress>

親自試一試

提示和注釋

提示：將 <progress> 標記與 JavaScript 結合使用，可顯示任務的進度。

注意：<progress> 標簽不適合表示儀表（例如磁盤空間使用情況或查詢結果的相關性）。如需表示儀表，請改用 <meter> 標簽。

屬性

屬性 值 描述
max 數字 規定任務所需的總工作量。默認值為 1。
value 數字 規定任務已完成的部分。

全局屬性

<progress> 標簽還支持 HTML 中的全局屬性。

事件屬性

<progress> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

無。

瀏覽器支持

表中的數字注明了首個完全支持該標簽的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 16.0 6.0 11.0