HTML5 progress Tag - Studyopedia

10 Jul HTML5 progress Tag

Posted at 16:14h in HTML5 by Studyopedia Editorial Staff 0 Comments

The HTML5 progress tag works like a progress bar. It shows the completion progress of a task, such as loading time, progress bar shown when copying a file, etc.

Example

<!DOCTYPE html>
<html>
<head>
<title>Understanding HTML5 progress tag</title>
</head>
<body>
<p>Downloading Windows 10 update</p>
<progress value="30" max="100">30 %</progress>
</form>
</body>
</html>

Here’s the output, showing the download bar with HTML5 progress element value 30,

HTML5 Progress Tag

Attributes

max– This attribute shows how much work the task indicated by the progress tag requires. It should be greater than zero and a valid floating point number.
value– This attribute shows the value (floating point number) of how much the task is completed.