Skip to content
Related Articles

Related Articles

How to Set Color of Progress Bar using HTML and CSS ?
  • Last Updated : 06 Sep, 2020

The progress bar is an important element on the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. 

The progress bar is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. It is not used to represent the disk space or relevant query.

Example 1: In this example, we will set the color of progress bar.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Set Background Color of
        Progress Bar using HTML and CSS?
    </title>
    <style>
      
        /* For Firefox */
        progress::-moz-progress-bar {
            background: green;
        }
  
        /* For Chrome or Safari */
        progress::-webkit-progress-value {
            background: green;
        }
  
        /* For IE10 */
        progress {
            background: green;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h4>
        Set Background Color of Progress
        Bar using HTML and CSS
    </h4>
  
    <progress value="40" max="100"></progress>
</body>
  
</html>

Output:



Example 2: In this example, we will set the color and background color of progress bar.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Set Background Color of
        Progress Bar using HTML and CSS?
    </title>
    <style>
  
        /* For Chrome or Safari */
        progress::-webkit-progress-bar {
            background-color: #eeeeee;
        }
  
        progress::-webkit-progress-value {
            background-color: #039603 !important;
        }
  
  
        /* For Firefox */
        progress {
            background-color: #eee;
        }
  
        progress::-moz-progress-bar {
            background-color: #039603 !important;
        }
  
        /* For IE10 */
        progress {
            background-color: #eee;
        }
  
        progress {
            background-color: #039603;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h4>
        Set Background Color of Progress
        Bar using HTML and CSS?
    </h4>
  
    <progress value="40" max="100"></progress>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :