Updated July 3, 2023
Introduction to HTML Progress Bar
The W3C standard dictates that the progress bar completes a specific task using a progress element. Developers use the progress tag to display a progress bar and represent file uploading progress on web pages. HTML incorporates this tag, offering web developers a straightforward method to display the bar. This tag is entirely different from the <meter> tag, representing disk space usage. And It is supported in HTML5, and the constant growth of HTML5 helps to introduce an interesting tool.
Syntax:
This progress element has both the starting and ending tag, and below shows the tag’s basic syntax. It implies the status of any process. The progress bar has inline display manners.
<Progress bar>
……
</Progress bar>Attributes
Attributes provide an informative element like the behavior of the explorer in the HTML. There are three attributes in the HTML: event attributes and global attributes. In addition to these attributes, the progress element has two new attributes:
max – The default value is 1.0 and indicates the total number of works needed to complete the task.
value – This specifies how much work has to be finished. The default value is assigned as less than 1.0. In the absence of the Val attribute, the progress bar is indeterminate.
Examples of progress bars include attaching a file, loading the document for the first time, or a web page loading.
Methods to Create Progress Bar in HTML
A progress bar has two different states: determinate and indeterminate. In the case of the indeterminate progress bar, you assign a null value to the value attribute, which makes it easier to style. On the other hand, for the determinate state, you define two new attributes, max, and value, as shown in the examples below. It uses some motion-like appearance to indicate the task with the horizontal bar. If the respective work is not depending on the task, then the < meter> tag is assigned. Regarding browser compatibility, it supports all browsers except Internet Explorer (partial support). Depending upon the browser compatibility progress bar may look different. This article will concentrate on the bar’s determinate state with max and Val attributes.
Example: Now, let’s look out for the basic implementation of a progress bar with min and val attributes.
<!DOCTYPE html>
<html>
<body>
Downloading on process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>
</body>
</html>Output:
1. Using CSS
Next, we shall see how to make a stylish progress bar look consistent on all platforms. To markup the progress bar, we use a value selector and adjust the dimensions, such as the width and height of the progress element, to create a visually appealing progress bar. However, dealing with different browsers can complicate this process. The browser makes some adjustments to the caliber of the task completion. We are making html bar look candid by applying the dimensional effect.
Example:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>Output:
2. Using Box Shadows and Colors
With the stylesheet, we can add style rules to this element by giving background color, assigning height, etc. The colors can be applied by applying the rgba() function. The progress bar element can be done with different colors to display the result good. This is mapped with the attribute’ class’. Generally, the progress bar moves from left to right to indicate the task as they start from the initial ‘0’ and displays the results once it reaches the target.
Example:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>Output:
Sample:
progress bar :: – WebKit-Progress-bar
Even a progress bar size can be varied with small, medium, and large using the class attribute.
3. Using Span
The code below is indeterminate, showing some process is going on for a time.
Example:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>Output:
4. Using JavaScript Example
The following rules have to be done using javascript. Creating <div> element if needed and next creating a style sheet, finally embedding them together. The below code shows the basic progress bar with JavaScript.
Example #1
<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>Output:
Example #2
<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>Output:
Conclusion
Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.
Recommended Articles
We hope that this EDUCBA information on the “HTML Progress Bar” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
