Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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

Last Updated : 22 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads