進度條 <progress>

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

<progress> 支援屬性

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

例如下方的 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>

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

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

修改 <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>
  

  

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～