HTML Progress Element
| Parameter | value |
| max | How much work the task requires in total |
| value | How much of the work has been accomplished already |
| position | This attribute returns the current position of the <progress> element |
| labels | This attribute returns a list of <progress> element labels (if any) |
HTML Progress Elements
The <progress> element is new in HTML5 and is used to represent the progress of a task
<!DOCTYPE html>
<html>
<head>
<title>HTML Atutorialhub Progress</title>
</head>
<body>
<progress value="22" max="100"></progress>
</body>
</html>
This creates a bar filled 22%
Changing the color of a progress bar
Progress bars can be styled with the progress[value] selector.
This example gives a progress bar a width of 250px and a height of 20px
progress[value] {
width: 250px;
height: 20px;
}
Progress bars can be especially difficult to style.
Chrome / Safari / Opera
These browsers use the -WebKit-appearance selector to style the progress tag. To override this, we can reset the appearance.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Now, we can style the container itself
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox styles the progress bar a little differently. We have to use these styles
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */}
Internet Explorer
Internet Explorer 10+ supports the progress element. However, it does not support the background-color property. You'll need to use the color property instead.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML Fallback
For browsers that do not support the progress element, you can use this as a workaround.
<!DOCTYPE html>
<html>
<head>
<title>HTML Atutorialhub Progress</title>
</head>
<body>
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
</body>
</html>
Browsers that support the progress tag will ignore the div nested inside. Legacy browsers that cannot identify the progress tag will render the div instead.
ATutorialHub Related Guide
-
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2Admin
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.2021-10-28 15:14:42 -
.png "Sea battle game only using HTML and CSS")
Sea battle game only using HTML and CSSAdmin
sea battle game where using only HTML and CSS and animation in css and html tags sea battle game2021-09-20 03:43:36
HTML Tutorials Comments (9)
User Comments
panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot
raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts
Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it
Zain Khan
2021-09-18 15:07:23Great content and customized courses.
Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!
Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website
Sax
2021-09-25 19:35:50Nice website
Leave a Comment