Change Progress Bar Color in HTML
The <progress> element is used to create a progress bars on a web page.
Loading:
The <progress> element can be used within the headings, paragraphs or within the any element in the body.
In an example below let’s write a code to create a progress bar in a web page.
Example
<!DOCTYPE html> <html> <head> </head> <body> <h1>HTML Progress Element</h1> <h2> Loading: <progress min="0" max="100" value="60"> </progress> </h2> </body> </html>
Attributes Used in the Code
- max:- Max attribute defines how much work the task requires in total.
- value:- It defines how much of the task has been completed.
TIP: Remove all the progress attributes and see what happens. It would be funny.
Change Progress Bar Color in HTML
We can change the color of progress element with the help of CSS.
In an example below let’s write a code to change the color of a progress element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* For Firefox */
progress::-moz-progress-bar {
background: green;
}
/* For Chrome or Safari */
progress::-webkit-progress-value {
background: green;
}
/* For IE10 */
progress {
background: green;
}
</style>
</head>
<body>
<h1>
HTML Progress Bar
</h1>
<b>Loading: </b><progress value="60" max="100"></progress>
</body>
</html>
How to Change Progress Bar Color in HTML
