如何使用HTML和CSS設定進度條的顏色？

在網站開發中，進度條是網站的重要組成部分。進度條顯示了進程的進度。借助它，用戶可以看到網站上正在進行的工作的狀態，包括載入時間、文件上傳、文件下載和其他類似任務。預設情況下，它呈灰色。然而，為了使進度條突出並具有視覺吸引力，可以使用HTML和CSS來改變它們的顏色。

什麼是進度列？

進度條用於顯示任務的進度。它是一個圖形使用者介面元素。它基本上由一個水平條組成，隨著任務的進行逐漸填充，同時伴隨著百分比值或其他完成指示器。進度條在網路應用程式中用於向使用者提供關於完成諸如文件上傳、文件下載或軟體安裝等過程需要多長時間的回饋。

使用HTML建立進度條

使用HTML標記語言可以建立進度條。在HTML5中，可以使用元素建立進度條。以下是使用HTML建立基本進度條的範例：

<progress value="30" max="100"></progress>

在上面的範例中，我們建立了一個進度條，並將進度條顯示為30％完成，將value屬性設為30。 max屬性設定為100。

Example 1

範例1

#以下是使用HTML建立基本進度條的完整程式碼範例

   
Create a basic progress bar Using HTML
   <progress value="30" max="100"></progress>
   

設定進度條樣式

建立進度條後，我們可以使用 CSS 對其進行樣式設定並設定其顏色。 CSS 向開發者提供了::-webkit-progress-value 偽元素來設定進度條的顏色。下面是在進度條上套用 CSS 樣式的範例。

progress {
   width: 300px;
   height : 25px;
   border: 2px solid gray;
}
progress::-webkit-progress-bar {
   background-color: green;
}
progress::-webkit-progress-value {
   background-color: red;
}

我們同時針對 ::-webkit-progress-bar 和 ::-webkit-progress-value 偽元素設定它們的背景顏色。同時，我們透過針對 元素設定進度條的高度和寬度。

範例 2

以下是使用 HTML 和 CSS 建立進度條的完整程式碼範例。

   



   
Create progress bar Using HTML and CSS
   <progress value="30" max="100"></progress>

為進度條新增文字

透過向進度條新增文字來提供使用者附加資訊。為此，我們使用 ::-webkit-progress-bar 偽元素和 ::-webkit-progress-value 偽元素建立兩層，其中進度值層位於進度條層的頂部。例如 -

progress {
   position: absolute;
   height: 24px;
   width: 300px;
   border: 1px solid #fff;
}
progress::before {
   content: "Loading: " attr(value) "%";
   position: absolute;
   width: 100%;
   text-align: center;
   font-size: 18px;
   color: blue;
}
progress::-webkit-progress-bar {
   background-color: orange;
}
progress::-webkit-progress-value {
   background-color: red;
}

在上面的範例中，我們在 元素中加入了一個 ::before 偽元素。它將在進度欄頂部以文字顯示進度值。我們還修復了進度條中心的文本，並將其字體大小設為 18px。

範例 3

以下是將文字新增至進度列的完整程式碼範例。

   



   
Create progress with additional information bar Using CSS
   <progress value="30" max="100"></progress>

結論

在這裡，我們討論了進度條是網頁開發中的一個有價值的工具。它為用戶提供了關於網站工作進展的回饋。它還可以根據網站的整體設計進行自訂。

以上是如何使用HTML和CSS設定進度條的顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！