Progress Bar in HTML 5

Sourabh Somani
Dec 20, 2019

43.1k
0
4
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

This article explains the HTML 5 progress bar and how to create it.

What is Progress Bar?

Sometimes a task is running within a program that might take a while to complete. A user-friendly program provides some information to the user that the task is happening. It also tells how long the task might take and how much the task has done or completed. One of the best ways to show all of these activities with the Progress Bar control.

Example

When you install software or when you upload a file onto a website or when you download a file, you have seen a progress bar showing how much the installation, download or upload has done or how much is remaining.

In a simple way, the progress bar indicates the progress of a specific task.

In HTML 5 there is the element "progress" that displays the progress of a task.

Syntax

<progress></progress>

According to the W3C, the progress element represents the completion progress of a task.

Attribute

Apart from the Global Attribute and Event Attributes, it has 2 more attributes as shown in the following table:

Attribute	Value	Description
max	Floating Point Number	Specifies how much work the task requires in total, (Default value is 1.0)
value	Floating Point Number	Specifies how much of the task has been completed (This value will be in between 0.0<=value<=max)

HTML DOM Progress Object

In the DOM the progress element is defined by PROGRESS that represents <progress> for HTML 5.

How the progress object can be accessed: using the getElementById() method you can access the <progress> element.
1. var x = document.getElementById("[Give id of the progress bar here]");
Create a progress object: You can also create a <progress> element dynamically using the createElement() method:
1. var x = document.createElement("PROGRESS");

Progress object properties: The properties of the progress object is given in the following table:

Property	Description
max	Sets and Gets the value of the max attribute of a progress bar.
value	Sets and Gets the value of the value attribute of a progress bar.
position	Gets the current value of a progress bar
labels	Gets a list of the progress bar's labels

States of the progress bar: The progress bar can be in either of the two states indeterminate or determinate.

Indeterminate State
If the progress bar does not have a value attribute then it will be in the indeterminate state.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. </head>
6. <body>
7. <progress>
8. </progress>
9. </body>
10. </html>
Output

How to provide style in an Indeterminate progress bar: As we know that an indeterminate progress bar doesn't have a value attribute so we can use the negation clause: not to style it. For example:
1. progress:not([value]) {
2. width: 250px;
3. height: 20px;
4. }
5. Or:
6. <!DOCTYPE html>
7. <html lang="en">
8. <head>
9. <meta charset="utf-8" />
10. <style>
11. progress:not([value]) {
12. width: 300px;
13. height: 25px;
14. }
15. </style>
16. </head>
17. <body>
18. <progress>
19. </progress>
20. </body>
21. </html>
Determinate State
As the name implies, a determinate progress bar has a determined value. So a determinate state progress bar has both a value max and value. And always remember the value of the following formula:

0.0 ≤ value ≥ max (in other words the value attributes value must be less than or equal to 0.0 and greater than or equal to max).
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. </head>
6. <body>
7. <progress max="100" value="50">
8. </progress>
9. </body>
10. </html>
Output
Styling Progress Bar
We can define various types of styles for the progress bar. By using progress[value] selector or using progress selector.

Example: Provide height and width.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <style>
6. progress[value] {
7. width: 250px;
8. height: 20px;
9. }
10. </style>
11. </head>
12. <body>
13. <progress max="100" value="50">
14. </progress>
15. </body>
16. </html>

Actually, multiple browsers provide separate pseudo-code classes to style the progress bar. We classify browsers as follows:

WebKit/Blink Browsers: like-Google Chrome, Opera, Safari
FireFox
Internet Explorer

1. WebKit/Blink Browsers

The appearance of the progress bar: It may be a progress-bar or none.

-webkit-appearance:progress-bar example: This is the default property.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
progress[value] {
-webkit-appearance: none;
width: 250px;
height: 20px;
}
</style>
</head>
<body>
<progress max="100" value="50">
</progress>
</body>
</html>

Output

-webkit-appearance:none example
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <style>
6. progress[value] {
7. -webkit-appearance: none;
8. width: 250px;
9. height: 20px;
10. }
11. </style>
12. </head>
13. <body>
14. <progress max="100" value="50">
15. </progress>
16. </body>
17. </html>

Output

WebKit/Blink provides the following two pseudo-classes to style the progress element:

-webkit-progress-bar
This is used to style the progress element container. Like to change the background color, border, border-radius and apply an inset box-shadow to the progress bar container.

Example
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <style type="text/css">
6. progress {
7. -webkit-appearance: none;
8. height: 25px;
9. width: 300px;
10. }
11. progress[value]::-webkit-progress-bar {
12. background-color: #eee;
13. border-radius: 5px;
14. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
15. }
16. </style>
17. </head>
18. <body>
19. <progress max="100" value="50">
20. </progress>
21. </body>
22. </html>
Output
-webkit-progress-value
This is used to apply the style inside the value. Like we can change the background color of the progress bar value that is by default green or we can also set the border if you see in the example above I have set border-radius:5px but if you see the left side then there you cannot see the radius effect but in the right side you can see that this is because of -webkit-progress-value.

Example
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <style type="text/css">
6. progress {
7. -webkit-appearance: none;
8. height: 25px;
9. width: 300px;
10. }
11. progress[value]::-webkit-progress-bar {
12. background-color: #eee;
13. border-radius: 5px;
14. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
15. }
16. progress[value]::-webkit-progress-value {
17. background-color: Red;
18. border-radius: 5px;
19. }
20. </style>
21. </head>
22. <body>
23. <progress max="100" value="50">
24. </progress>
25. </body>
26. </html>
Output