progress element

Lets look at the progress element of HTML5.

You could implement this progress element of HTML5 with the file upload or the user form filling etc, to indicate the amount of upload or the profile completion.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>progress Element: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
<label>Progress: </label>
 <progress value="50" max="100">50%</progress>
</form>
 
</body>
</html>

Here we have a progress element, with 100 as max and 50 as it’s value. This way, the progress bar indicates that the progress is 50% complete. Also there is a text between the progress tag, which is used as a fall back text for browsers which do not yet support progress element of HTML5.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

progress element – progress bar: HTML5

[youtube https://www.youtube.com/watch?v=s1tfYfCpZx8]

YouTube Link: https://www.youtube.com/watch?v=s1tfYfCpZx8 [Watch the Video In Full Screen.]

Change the number present in value and max attribute and look at the visual effect/indication of the progress on the browser.

Note: In real time application development, you could fetch the numbers for value and max attribute dynamically using JavaScript. This way, the effects will be real and it creates the illusion that the progress is being made!