Home >>HTML5 Tutorial >HTML 5 <progress> Tag

HTML 5 <progress> Tag

HTML 5 <progress> Tag

It helps you to represent the progress of the task. It is an easy way for developers to create progress bar on the website. Basically it defines how much the work is done and to show the progress of a file uploading on the webpage.

Syntax:

<progress attributes...> <progress>

Attributes

It consists of two attributes which are listed below:

  • max: It helps you to represent the total work is to be done for completing a task.
  • value: It shows the amount of work are already completed.

Note: This tag is used in conjunction with JavaScript to display the progress of a task.

Let's take an Example of HTML5 <progress> Tag:

<!DOCTYPE html> 
<html> 
	<head> 
		<title>progress tag</title> 
	</head> 
	<body> 
<progress></progress>  
	</body> 
</html>	
Output:

Let's see the progress tag example with value and max attributes.

<!DOCTYPE html> 
<html> 
	<head> 
		<title>progress tag</title> 
	</head> 
	<body> 
		<h1 style="color:orange;">Phptpoint</h1> 
		Downloading progress: 
		<progress value="54" max="100"> 
		</progress> 
	</body> 
</html>
Output:

Phptpoint

Downloading progress: