HTML Progress

The HTML <progress> tag is used to display the progress of a task. It is used to show the progress of a file uploading on the web page.

HTML Progress Tag Attributes

Attribute Description
value It defines the amount of task, which has been completed.
max It defines the quantity of task required in total.

HTML Progress with max Attribute


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Progress Tag </title>
</head>
<body>
Downloading Progress :
<progress value="50" max="100"> </progress>
</body>
</html>

Output

HTML Progress Tag

HTML Animated Progress bar

Let's see progress bar without max and value attribute.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Progress Tag Without Value and Max Attribute </title>
</head>
<body>
<progress> </progress>
</body>
</html>

Output

Progress Tag Without Value and Max Attribute

HTML Progress using Style

You can style the progress bar by css. Let's see the progress using CSS.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Progress with CSS </title>
<style>
progress{
width: 200px;
height: 10px;
}
</style>
</head>
<body>
<progress></progress>
</body>
</html>

Output

HTML Progress with CSS

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<progress>
Yes
Yes
Yes
Yes
Yes








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.