webdevlinux - logo Web Dev Linux

HTML Progress Bars

There are two types of HTML progress bar as determinate & indeterminate. We use the progress element to display the progress of something. In this chapter, you will see what are the different ways of use the progress element.

HTML Progress bars Progress Bars

Try the example below.

FILE : progress.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Progress bars</title>
</head>
<body>
<p>Indeterminate progress bar : <progress></progress></p>
<p>40% : <progress value="0.4"></progress></p>
<p>87% : <progress value="87" max="100"></progress></p>
</body>
</html>

Explanation

Take a look at the explanation of elements & the attribute used in the example.

<progress></progress>
The progress element represents a progress bar. Without the value attribute this represents an indeterminate progress bar.
value="0.4"
When the value attribute specified, it represents a determinate progress bar. If the max attribute is not specified then the value of value attribute can be a valid floating point number between 0 to 1.
max="100"
This represents the maximum value of the element. When this is specified the value of the value attribute must be less than or equal to the max attribute value.