( Day 21.3 ) HTML 進度條 <progress>

2023 iThome 鐵人賽

DAY 21

Modern Web

跟著 OXXO 一起學 HTML系列第 57 篇

15th鐵人賽 html html教學

oxxo

2023-09-21 10:26:57

476 瀏覽

分享至

<progress> 是 HTML 裡的進度條元素，不只可以在表單中顯示進度，更常常作為「載入中」的等待畫面使用，這篇文章將會介紹 <progress> 進度條元素的用法。

原文參考：進度條 progress

認識 `<progress>`

<progress> 是 HTML 裡的進度條元素，常出現在表單中表現進度，或是產生載入中的等待畫面。

<progress> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，但通常不會放入內容。

<progress> 的顯示類型為「inline-block 行內區塊元素」，預設不會強制換行。

<progress> 不可以是 <progress> 的子元素。

<progress> 如果有 max 屬性，value 數值必須小於 max 數值，如果沒有 max 屬性，則 value 數值必須小於等於 1。

例如下方的 HTML 開啟後，在網頁中會放入一個 <progress>。

<form action="/test.aspx" method="post">
  <progress value="10" max="100"></progress>
</form>

HTML 教學 - 進度條 - 認識

`<progress>` 支援屬性

<progress> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也會使用下方的專門屬性：

屬性	說明
value	數值。
max	進度最大值，必須是「非負」的整數或浮點數。

例如下方的 HTML 開啟後，可以透過屬性設定產生讓三個不同進度的進度條。

<form action="test.aspx" method="get">
  <progress value="10" max="100"></progress>
    <br>
  <progress value="60" max="100"></progress>
    <br>
  <progress value="90" max="100"></progress>
</form>

HTML 教學 - 進度條 - 支援屬性

如果不設定 value 和 max 屬性，則進度條就會呈現「載入中」的狀態。

<form action="test.aspx" method="get">
  <progress></progress>
</form>

HTML 教學 - 進度條 - 載入中

修改 `<progress>` 樣式

由於 <progress> 的樣式主要根據瀏覽器而定，W3C 並沒有規範其預設樣式，因此可以透過 CSS 設定 <progress> 樣式，需要注意的是有些舊版的瀏覽器可能不支援客製化進度條的樣式。

設定 accent-color 屬性調整進度顏色

設定 accent-color 的顏色值，就能改變進度條的進度顏色 ( accent-color 並不是標準的 CSS 屬性，是瀏覽器針對進度條的屬性，所以使用後在某些編輯器，會出現黃色或紅色的警告提醒 )
```
<style>
  progress{
    accent-color:red;
  }
</style>
<form action="test.aspx" method="get">
  <progress value="0.5"></progress>
</form>
```
停用預設樣式

如果要進一步修改進度條樣式，則需要使用下方 CSS 的設定，先停用瀏覽器的預設樣式，使用後會看到進度條原本的樣子 ( -webkit- 開頭是針對 Chrome 瀏覽器，-moz- 開頭是針對 Firefox 瀏覽器 )。
```
<style>
  progress{
    -webkit-appearance: none;
    -moz-appearance: none;
  }
</style>
<form action="test.aspx" method="get">
  <progress value="0.5"></progress>
</form>
```

自訂樣式

停用瀏覽器預設樣式後，就能使用 CSS 的方式設定自己所需的樣式。

<style>
  progress{
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius:20px;   /* 圓角 */
    overflow: hidden;     /* 超過範圍就裁切 */
    height:40px;          /* 高度 */
  }

  ::-webkit-progress-value {
    background-color: red;
  }
  ::-moz-progress-value {
    background-color: red;
  }

  ::-webkit-progress-bar {
    background-color: #fcc;
  }
  ::-moz-progress-bar {
    background-color: #fcc;
  }
</style>
<form action="test.aspx" method="get">
  <progress value="0.5"></progress>
</form>

HTML 教學 - 進度條 - accent-color