Progress Bar in HTML 5

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 it 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
  1. <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.
  1. 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>  
  2. 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

      3. 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
 
Appearance of the progress bar: It may be a progress-bar or none.
-webkit-appearance:progress-bar example: This is the default property.
  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-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

How To Design a Colorful Progress Bar
  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: 30px;   
  9.     width: 400px;   
  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-image:   
  18. -webkit-linear-gradient(-20deg,   
  19. transparent 33%, rgba(255, 0, 0, .1) 33%,   
  20. rgba(0,0, 0, .1) 66%, transparent 66%),   
  21. -webkit-linear-gradient(top,   
  22. rgba(255, 255, 255, .25),   
  23. rgba(0, 0, 0, .25)),   
  24. -webkit-linear-gradient(left, #0ff, #f3c);   
  25. border-radius: 5px;   
  26. background-size: 15px 30px, 100% 100%, 100% 100%;   
  27. }   
  28. </style>   
  29. </head>   
  30. <body>   
  31.     <progress max="100" value="50">   
  32.     </progress>   
  33. </body>   
  34. </html>  
Output


2. FireFox Browser: For the FireFox browser use "-moz" instead of "-webkit" and everything else is the same.
3. Internet Explorer: In IE you can use all these properties directly, like appearance.
How To Design a Colorful Progress Bar With animation
  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: 30px;   
  9.      width: 400px;   
  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-image:   
  18.     -webkit-linear-gradient(-20deg,   
  19.     transparent 33%, rgba(255, 0, 0, .1) 33%,   
  20.     rgba(0,0, 0, .1) 66%, transparent 66%),   
  21.     -webkit-linear-gradient(top,   
  22.     rgba(255, 255, 255, .25),   
  23.     rgba(0, 0, 0, .25)),   
  24.     -webkit-linear-gradient(left, #0ff, #f3c);   
  25.     border-radius: 5px;   
  26.     background-size: 15px 30px, 100% 100%, 100% 100%;   
  27.     -webkit-animation: animate-stripes 2s linear infinite;   
  28. }   
  29. @-webkit-keyframes animate-stripes {100% { background-position: -100px 0px; }}   
  30. </style>   
  31. </head>   
  32. <body>   
  33.     <progress max="100" value="50">   
  34.     </progress>   
  35. </body>   
  36. </html>  
Output

Author
Sourabh Somani
Sourabh Somani
0 56.1k 4.3m