progress tag in html5 with example


  1. The progress tag is used to representing progress of a task.
  2. The progress tag can be used in conjunction with javascript to display the progress of a task.
  3. 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.
  4. 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.


0 comments:

Post a Comment