Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Set Color of Progress Bar using HTML and CSS?
In web development, a progress bar is an important part of the website. A progress bar displays the progress of the process. With the help of it, the user can see the status of the work being done on the website, which includes loading time, file uploads, file downloads and other similar tasks. By default, it looks gray. However, to make the progress bars stand out and look visually appealing, their color can be changed using HTML and CSS.
What is a Progress Bar?
A progress bar is used to show the progress of a task. It is a graphical user interface element. It basically consists of a horizontal bar that fills up gradually as the task progresses, accompanied by a percentage value or other indicator of completion. Progress bars are used in web applications to provide feedback to users about how long it will take to complete a process such as a file upload, file download, or software installation.
Creating Progress Bar Using HTML
HTML markup is used to create progress bars. A progress bar is created in HTML5 using the <progress> element. Here is an example of how to create a basic progress bar using HTML −
<progress value="30" max="100"></progress>
In the above example, we have created a progress bar, and to show the progress bar as 30% complete, the value attribute is set to 30. The max attribute is set to 100.
Example 1
Below is a full code example to creating basic progress bar using HTML
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
}
</style>
<body>
<h2>Create a basic progress bar Using HTML</h2>
<progress value="30" max="100"></progress>
</body>
</html>
Styling the Progress Bar
After creating the progress bar, we can use the CSS to style it and set its color. CSS provides the ::-webkit-progress-value pseudo-element to developers to set the color of the progress bar. Here is an example to apply the CSS style on a progress bar.
progress {
width: 300px;
height : 25px;
border: 2px solid gray;
}
progress::-webkit-progress-bar {
background-color: green;
}
progress::-webkit-progress-value {
background-color: red;
}
We target both the ::-webkit-progress-bar and ::-webkit-progress-value pseudo-elements and set their background colors. And we also set the height and width of the progress bar by targeting the <progress> element.
Example 2
Below is a full code example to create a progress bar using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
progress {
width: 300px;
height: 25px;
border: 2px solid gray;
}
progress::-webkit-progress-bar {
background-color: green;
}
progress::-webkit-progress-value {
background-color: red;
}
</style>
</head>
<body>
<h2>Create progress bar Using HTML and CSS</h2>
<progress value="30" max="100"></progress>
</body>
</html>
Adding Text to the Progress Bar
Additional information is provided to users by adding text to the progress bar. To do this, we use the ::-webkit-progress-bar pseudo-element and the ::-webkit-progress-value pseudo-element to create two layers, with the progress value layer on top of the progress bar layer. For example −
progress {
position: absolute;
height: 24px;
width: 300px;
border: 1px solid #fff;
}
progress::before {
content: "Loading: " attr(value) "%";
position: absolute;
width: 100%;
text-align: center;
font-size: 18px;
color: blue;
}
progress::-webkit-progress-bar {
background-color: orange;
}
progress::-webkit-progress-value {
background-color: red;
}
In the example above, we have added a ::before pseudo-element to the <progress> element. It will display the progress value as text on top of the progress bar. We have also fixed the text in the center of the progress bar and set its font size to 18px.
Example 3
Below is a full code example of adding the text to the progress bar.
<!DOCTYPE html>
<html>
<head>
<style>
progress {
position: absolute;
height: 24px;
width: 500px;
border: 1px solid #fff;
}
progress::before {
content: "Loading: " attr(value) "%";
position: absolute;
width: 100%;
text-align: center;
font-size: 18px;
color: blue;
}
progress::-webkit-progress-bar {
background-color: orange;
}
progress::-webkit-progress-value {
background-color: red;
}
</style>
</head>
<body>
<h3>Create progress with additional information bar Using CSS</h3>
<progress value="30" max="100"></progress>
</body>
</html>
Conclusion
Here, we have discussed that a progress bar is a valuable tool for web development. It provides feedback to the users on the progress of the work being done on the website. It can also be customized to better match the overall design of the website.
12K+ Views
