progress tag in html5 with example

Home » HTML 5 Examples » HTML 5 Tutorials » HTML5 » progress tag in html5 with example

progress tag in html5 with example

Posted by 20Fingers2Brains on Tags: HTML 5 Examples , HTML 5 Tutorials , HTML5

The progress tag is used to representing progress of a task.
The progress tag can be used in conjunction with javascript to display the progress of a task.
The <progress> is not suitable for representing a gauge (such as disk space usage or a tally of votes). To represent a gauge, use the <meter> tag instead.
The <progress> tag is not supported in IE 9 and earlier versions, or Safari for Windows.

Example 1 :

<html>
    <head><title>progress tag in html5</title>
    </head>
    <body>
        <span>Downloading :</span>
        <progress value="66" max="100">Progressing</progress>
    </body>
</html>

Demo :

In the above example, we have used progres element to show the progress of a task.

Example 2 :

<html>
    <head><title>progress tag in html5</title>
    <style type="text/css"">
    .progress1
    {
        height:30px;
        width:100px
    }
.progress2
    {
        height:10px;
        width:300px
    }
    </style>
    </head>
    <body>
        <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>
    </body>
</html>

Demo :

In the above example we have manipulated the height and width of the progress element using CSS.