在網站開發中，進度條是網站的重要組成部分。進度條顯示了進程的進度。借助它，用戶可以看到網站上正在進行的工作的狀態，包括加載時間、文件上傳、文件下載和其他類似任務。默認情況下，它呈灰色。然而，為了使進度條突出并具有視覺吸引力，可以使用HTML和CSS來改變它們的顏色。
什么是進度條？
進度條用于顯示任務的進度。它是一個圖形用戶界面元素。它基本上由一個水平條組成，隨著任務的進行逐漸填充，同時伴隨著百分比值或其他完成指示器。進度條在Web應用程序中用于向用戶提供關于完成諸如文件上傳、文件下載或軟件安裝等過程需要多長時間的反饋。
使用HTML創建進度條
使用HTML標記語言可以創建進度條。在HTML5中，可以使用元素創建進度條。下面是一個使用HTML創建基本進度條的示例：
<progress value="30" max="100"></progress>
登錄后復制
在上面的示例中，我們創建了一個進度條，并將進度條顯示為30％完成，將value屬性設置為30。max屬性設置為100。
Example 1
的中文翻譯為：
示例1
下面是使用HTML創建基本進度條的完整代碼示例
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
}
</style>
<body>
<h2>Create a basic progress bar Using HTML</h2>
<progress value="30" max="100"></progress>
</body>
</html>
登錄后復制
設置進度條樣式
創建進度條后，我們可以使用 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 偽元素設置它們的背景顏色。同時，我們通過針對 <progress> 元素設置進度條的高度和寬度。
示例 2
下面是使用 HTML 和 CSS 創建進度條的完整代碼示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
progress {
width: 300px;
height: 25px;
border: 2px solid gray;
}
progress::-webkit-progress-bar {
background-color: green;
}
progress::-webkit-progress-value {
background-color: red;
}
</style>
</head>
<body>
<h2>Create progress bar Using HTML and CSS</h2>
<progress value="30" max="100"></progress>
</body>
</html>
登錄后復制
給進度條添加文本
通過向進度條添加文本來向用戶提供附加信息。為此，我們使用 ::-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
以下是將文本添加到進度條的完整代碼示例。
<!DOCTYPE html>
<html>
<head>
<style>
progress {
position: absolute;
height: 24px;
width: 500px;
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;
}
</style>
</head>
<body>
<h3>Create progress with additional information bar Using CSS</h3>
<progress value="30" max="100"></progress>
</body>
</html>
登錄后復制
結論
在這里，我們討論了進度條是網頁開發中的一個有價值的工具。它為用戶提供了關于網站工作進展的反饋。它還可以根據網站的整體設計進行自定義。
以上就是如何使用HTML和CSS設置進度條的顏色？的詳細內容，更多請關注www.92cms.cn其它相關文章！
