HTML progress tag

Summary -

In this topic, we described about the <progress> tag along with detailed example.

The <progress> tag was introduced in HTML 5. Task completion progress. The <progress> tag used to represent the task completion progress from commencement through to completion.

JavaScript can be used to dynamically adjust a progress bar to show the progresses. The tag can be specified like <progress value="" max=""></progress>. <progress> tag should be coded inside another <progress> tag.

Syntax -

<progress>.... </progress>

Optional Attributes -

Attribute	Description	Values
value	Specifies how much task is completed	Number. Should be between 0 and the value of max.
max	Specifies how much task required in total.	Number. Should be greater than 0.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>progress tag example..</title>
	</head>
	<body>
		<p> Tutorial completion progress:
		<progress value="50" max="100">
		</progress></p>
	</body>
</html>

Output -

Tutorial completion progress: