Progress bar in HTML
At times, there might be a need of displaying a progress bar on our web page. It is simply used to indicate the completion progress of some task, which will be displayed as a progress bar. Now, if we want to achieve this, we just need to make use of the progress tag.
Here, we are going to have some attributes, like max, which describe how much work, the specified task requires. The default value for the max attribute is 1(if not present), and if the attribute is present, it should have a value greater than 0.
There is another attribute called value. This specifies the amount of work completed. If the value is not present, the progress bar becomes indeterminate, which means that it is not known how long the completion of the specified activity is going to take. Well, here is how we create a progress bar –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<progress max=”100″ value=”50″>50%</progress>
</body>
</html>
So, we can understand from the code as well, that the progress bar has a max value of 100, and the task is done at 50, which means that we get a half-filled and half-empty progress bar. Let’s have a look now –
try removing the value thing from the above code, and you can find that the progress bar now has become indeterminate. You can also observe the output. Also, if you are wondering why I have written the text 50% there, it is not visible anywhere. The thing is that it is just recommended. It is not an accessible label.
So, this is how you can get a progress bar on your webpage. You can try changing the values for the different attributes that we have been using, and observe the changes accordingly.
