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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

How to Change Progress Bar Color in HTML