Progress Tag in HTML5

In this article I am going to describe about the implementation and use of Progress tag in HTML5.
  • 1474

Progress Tag

Progress tag is used to represent completion progress of a task. It is new in HTML5. In this both the starting and the ending tag are mandatory.

<progress> tag is not used for representing a gauge. (To represent a gauge we use meter tag)

A progress tag can contain other tags. It can not contain another progress tag.

Browser Support

The <progress> tag is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari for Mac. It is not supported in IE 9 and earlier versions, or Safari for Windows.


Syntax of Progress Tag :

<progress value="" max=""></progress> 
  Attribute       Value               Description
    max      number  Specifies how much work the task indicated by the progress element requires.
   value      number  Specifies how much of the task indicated by the progress element has been completed.

Example of Progress Tag in HTML5

<!DOCTYPE html>

<html lang="en" xmlns="">


    <meta charset="utf-8" />

    <title>Progress Tag</title>

    <style type="text/css"">



            height: 20px;

            width: 100px;





            height: 10px;

            width: 300px;





    <h2>Implementation of Progress Tag in HTML5</h2>

    <span>Downloading :</span>

    <progress value="66" max="100" class="progress1">Progressing</progress><br>


    <span>Installing :</span>

    <progress value="66" max="100" class="progress2">Progressing</progress>

    <p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9

             and earlier versions, or in Safari for Windows.</p>





© 2020 DotNetHeaven. All rights reserved.