Progress Bar in HTML 5

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
  

Output

Output

Conclusion

In this article, we studied HTML 5 progress bar