Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Color of Progress Bar Using HTML and CSS
To set color of progress bar, is an important part of website as progress bar displays progress of any process like file downloads, loading time, file uploads, and other similar tasks.
In this article, we have a progress bar whose by default color is grey, our task is to change the color of the progress bar.
Approaches to Set Color of Progress Bar
Here is a list of approaches to set color of progress bar using html and css with step wise explaination and complete example codes.
Progress Bar Color Using background Property
To set color of progress bar, we have used CSS background property on progress element. The background property set the background color of the progress in progress bar to specified color.
- We have set "background: #04af2f;" on progress element which changes the the progress color to green.
Example
Here is an example implementing above mentioned steps to set color of progress bar.
<!DOCTYPE html>
<html lang="en">
<style>
body {
text-align: center;
}
progress {
border: 2px solid grey;
width: 300px;
height: 25px;
background: #04af2f;
}
</style>
<body>
<h3>
Set color of progress bar using HTML and CSS
</h3>
<p>
In this example we have used CSS background
property to add text to progress bar.
</p>
<progress value="30" max="100"></progress>
</body>
</html>
Progress Bar Color Using CSS psuedo Element
In this approach, we have used CSS psuedo elements which are "progress::-webkit-progress-bar" and "progress::-webkit-progress-value" to chnage the color of progress bar. The progress::-webkit-progress-bar represents the whole bar of a progress element and progress::-webkit-progress-value represents filled-in portion of the bar of a progress element.
- We have used "background-color : rgb(178, 255, 255);" which sets the color of progress bar and "background-color: #04af2f;" to set the color of completed progress.
Example
Here is an example implementing above mentioned steps to set color of progress bar.
<!DOCTYPE html>
<html lang="en">
<style>
body {
text-align: center;
}
progress {
border: 2px solid grey;
width: 300px;
height: 25px;
}
progress::-webkit-progress-bar {
background-color: rgb(178, 255, 255);
}
progress::-webkit-progress-value {
background-color: #04af2f;
}
</style>
<body>
<h3>
Set color of progress bar using HTML and CSS
</h3>
<p>
In this example we have used CSS psuedo
element to add text to progress bar.
</p>
<progress value="30" max="100"></progress>
</body>
</html>
Conclusion
In this article, we have understood how to set color of progress bar using html and css. we have discussed two different approaches for setting the color of progress bar which are by using CSS background property and using CSS psuedo element. We can use any of the two approaches however, using CSS psuedo element method to set color of progress bar is considered a non standard method as it may not work for every user.
20K+ Views
