Loading bar HTML

In this article, we will see how to create a loading/progress bar in HTML. <progress> tag is new in HTML5 and it is used to represent the progress of the task. The <progress> tag is paired tag, so we need to create opening and closing tags. We must use two attribute values max, the value attribute is used to set the progress value and the max attribute is used to set the maximum progress value. The default color of the progress bar is blue, we can also change the color.

Ex:

<progress value="22" max="100"></progress>

Output:

1. In the above code, we have created a <progress> tag to display prograss bar.
2. Then set the “value” attribute to 22 and the “max” attribute to 100. So, the maximum value of this progress bar is 100.
3. See the output, the progress bar is displayed 22% value of 100%