Home »
HTML »
HTML Progress
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
Example
Try this code »
<!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
Example
Try this code »
<!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>
<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 Animated Progress bar
Let's see progress bar without max and value attribute.
Example
Try this code »
<!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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Progress Tag Without Value and Max Attribute </title>
</head>
<body>
<progress> </progress>
</body>
</html>
Output
HTML Progress using Style
You can style the progress bar by css. Let's see the progress using CSS.
Example
Try this code »
<!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>
<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
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<progress> |
Recommended :