Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set the maximum value of progress bar using HTML ?

  • Last Updated : 22 Dec, 2020

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

The maximum value of progress bar can be set by using max property value.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<progress attributes...> </progress>

Property Values:



  • level: It returns the list of progress bar.
  • max: It is used to set or return the progress bar value of max attribute.
  • value: It represent the amount of work are already completed.
  • position: It returns the current position of progress bar.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to set the maximum value
        of progress bar using HTML?
    </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to set the maximum value
        of progress bar using HTML?
    </h3>
  
    Downloading progress for a song:
    <!-- Set maximum value of progress bar -->
    <progress value="57" max="200">
    </progress>
</body>
  
</html>

Output:

Supported Browsers: 

  • Google Chrome 8.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 11.0
  • Safari 6.0
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!