HTML5 Progress Tag

Implementing the progress bar for knowing the current status of task is common among the applications. Prior to HTML5, there is no default element in HTML to achieve this functionality. Programmers has to implement their own design or to get the help of third party implementation. With the HTML5, the <progress> tag is used to show the progress of the work. It shows the progress bar and tells the how much progress has been finished.

Syntax of <progress> Tag

<progress>....</progress>

Supported Browser

<progress> tag in HTML5 is supported in Firefox, Opera, Chrome, Internet Explorer 10 and Safari 6.

Attributes of <progress> Tag

max: This attribute specifies how much task need to done before it complete. If it is not specified, the default value of this attribute is between 0.0. to 1.0.
value: This attribute specifies the current completed task or current status of the progress bar.

States of <progress> Bar

A progress bar state can be categorized in two states as below:

Indeterminate: This type of progress bar is used if the actual status cannot be calculated, hence can be used to provide user feedback.
Determinate: A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process.

In the following examples we have used the determinate progress bars

Example of <progress> Tag

<!DOCTYPE html>
<body>
   <h4>Default Indeterminate Progress Bar</h4>
   <progress></progress><br></br>
   <h4>Progress Bar - 0%</h4>
   <progress max="10" value="0"></progress><br></br>
   <h4>Progress Bar -100%</h4>
   <progress max="3254" value="3254"></progress><br></br>
   <h4>Progress Bar - 57%</h4>
   <progress max="0.7" value="0.4"></progress><br></br>
</body>
</html>

Here we can see various examples of using progress bars. You can further change the look and feel of the progress bar by adding styles, animations.

Example Application Test

Save the file as progress_example.html in your system.
Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :