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

      Conclusion

       
      In this article, we studied HTML 5 progress bar