Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the maximum value of progress bar using HTML?
The progress bar on any website is used to represent the percentage of any work that is completed like the download progress of any song or movie from any website. You can use the progress bar to show the amount of song or movie that is downloaded and remaining.
In HTML, we can use the <progress> element to show a progress bar on the website to represent the amount of completed and the remaining work. You can handle the value of the progress bar on your own by defining the attributes with the element itself.
Let us now understand the use of the different attributes that can be given to the <progress> element. The list of attributes that can be defined inside the progress tag are listed and explained below −
Value − The value attribute represents the current value of the progress that means the amount of the task or work that is already completed.
Max − The max attribute is used to set the maximum value to which the progress bar can reach. You can define progress bar with any number of the max value that it can reach.
Position − The position attribute returns the current position of the progress bar.
Level − The list of the progress bar is returned by this attribute.
Syntax
The below syntax will show you how you can use the progress element with the above defined attributes in the HTML document −
<progress discussed attributes……> </progress>
NOTE − This element is not a self-closing tag, but it does not mean that you can pass any kind of value between its starting and the closing tag. If you try to pass any value inside it. It will ignore that value and will not show it on the user screen.
Let us understand the practical implementation of the progress bar element and set the maximum value to it with the help of code example.
Example
The below example will help you understand that how you can set the maximum value to progress bar in HTML −
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Set the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 50% completion of the process as the max value is set to 100 and the current value is set to 50. </p>
<progress value = "50" max = "100"></progress>
</center>
</body>
</html>
In the above example, we have used the progress element with the value and the max attribute. We have used the max attribute to set the maximum value to which the progress bar can reach which is 100 in this case and value attribute to set the current value that is 50 in this case which shows the 50% completion of the process.
Let us see one more code example to understand the setting of maximum value to the progress bar in HTML.
Example
This example will illustrate you the use of the progress element and setting the maximum value of it using the max attribute:
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Set the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 75% completion of the process as the max value is set to 100 and the current value is set to 75.</p>
<progress value = "75" max = "100"></progress>
</center>
</body>
</html>
In this code example, we have set the max value of the progress bar as 200 and the current value as 150 that makes the progress bar to show the 75% completion of the process that is going on.
Let us see one more code example to deeply understand the concept od setting the max value to the progress bar using the max attribute.
Example
The example below will show how the progress bar will show the progress of a process if both the values of max and value attribute are similar −
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Setting the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 100% completion of the process as the max value is set to 100 and the current value is set to 100. </p>
<progress value = "100" max = "100"></progress>
</center>
</body>
</html>
In this example, we have used the max attribute and the value attribute with the same values which will make the progress element to show the fully completion of the process and display the full progress bar as blue as the process is completed.
Conclusion
In this article, we have learned about how you can set the max value to a progress element in the HTML. We have discussed and understand this process in details with the help of three different code examples with different values given to the max attribute to set the different maximum values in each and every code example.
47 Views
