Related Articles

Related Articles

How to Create a Progress Bar using HTML5 ?
  • Last Updated : 28 May, 2020

In this article, we are creating the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query.

Syntax:

<progress attributes...> </progress>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Represent the progress of a task
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <h2>
        HTML5: How to represent 
        the progress of a task
    </h2>
      
    Downloading progress for a song:
    <progress value="57" max="100">
    </progress>
</body>
  
</html>               

chevron_right


Output:

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :