Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 22 Dec, 2020
Geek Week

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.


<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.



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


Supported Browsers: 

  • Google Chrome 8.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 11.0
  • Safari 6.0

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :