How to use the progress bar in HTML
problem
You will like to use a progress bar on your web page. For example to show the progress of a process. Instead of showing a percentage, you visually convey the status using a progress bar.
SOLUTION
In HTML we have the <progress> tag. It has an opening and closing tag. For example:
<progress></progress>
output
specifying progress value
In order to show the progress we can use the value attribute and max attribute. For example we can set the max value to 100 and the value to 50. In this case to show 50% of something, e.g. uploading a file.
<progress value="50" max="100"></progress>
output
It shows 50% (half of it full).
We can use the progress along a label for better describing what it does to the user. For example, let’s suppose it’s uploading a file.
<label for="prgbar">Uploading...</label>
<progress value="50" max="100" id="prgbar"></progress>
output
conclusion
In this post we saw how to use the <progress> tag and how to set a value.
References:
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪