How to Set Color of Progress Bar using HTML and CSS ?
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:
Please Login to comment...