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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
< !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
Change the number present in value and max attribute and look at the visual effect/indication of the progress on the browser.