crus4

logo

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

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