Home >>HTML5 Tutorial >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:

« Previous Next »

HTML5 Tutorial HTML5 article tag html5 header tag HTML5 Footer Tag HTML5 Main Tag HTML5 Detail Tag HTML5 Section Tag HTML5 <aside> Tag HTML5 <bdi> tag HTML 5 <progress> Tag HTML5 <summary> Tag html audio tag HTML5 <figcaption> tag html video tag HTML5 <nav> Tag

No Sidebar ads