How to change progress bar color in html

By FoxLearn 3/14/2024 4:04:11 PM 50

This post shows you how to change progress bar color in html

The progress bar is an HTML5 element, and you can style it using CSS properties like background-color or color.

How to change progress bar color in html

To change the color of a progress bar in HTML, you can use CSS.

I will create a css file with named site.css, then include the css to html file

/* Style the progress bar */
        progress {
            width: 200px; /* Adjust width as needed */
            height: 20px; /* Adjust height as needed */
            border: none;
            background-color: lightgray; /* Default background color */
        }

        /* Change the color of the progress bar */
        progress::-webkit-progress-bar {
            background-color: lightgray; /* Default background color */
        }

        progress::-webkit-progress-value {
            background-color: green; /* Change to desired color */
        }

        progress::-moz-progress-bar {
            background-color: green; /* Change to desired color */
        }

Next, create a simple html file as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Color</title>
    <link rel="stylesheet" href="/css/site.css" type="text/css" />
</head>
<body>
    <h2>Progress Bar Color Example</h2>
    <progress value="50" max="100"></progress>
</body>
</html>

In this example:

- The progress element defines the progress bar.

- The value attribute sets the current progress value.

- The max attribute sets the maximum value of the progress bar.

- CSS selectors like ::-webkit-progress-bar, ::-webkit-progress-value, and ::-moz-progress-bar are used to target different parts of the progress bar and apply styling.

- Adjust the background-color property within these selectors to change the color of the progress bar and its fill.

Remember to adjust the width, height, and other properties to match your design requirements. Additionally, different browsers may require different prefixes for CSS selectors (e.g., -webkit-, -moz-) for cross-browser compatibility.