How to Set Color of Progress Bar using HTML and CSS

admin_img Posted By Bajarangi soft , Posted On 13-10-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.

Progress bar In Bootstrap

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

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

Example 2: In this example, we will set the color and background color of progress bar.
<!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: #e82020;
        }

        progress::-webkit-progress-value {
            background-color: #fc3e26 !important;
        }


        /* For Firefox */
        progress {
            background-color: #eee;
        }

        progress::-moz-progress-bar {
            background-color: #962d03 !important;
        }

        /* For IE10 */
        progress {
            background-color: #eee;
        }

        progress {
            background-color: #f62922;
        }
    </style>
</head>

<body>
<h1 style="color:#b14d18;">
    BAJARANGI SOFT
</h1>

<h4>
    Set Background Color of Progress
    Bar using HTML and CSS?
</h4>

<progress value="40" max="100"></progress>
</body>

</html>

Related Post