HTML Progress Element

HTML Progress Element
Nikhil
Published on 2021-07-02 05:10:32
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

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website