Page 135 - HTML5

Chapter 33: Progress Element

Parameters

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)

Remarks

The <progress> element is not supported in versions of Internet Explorer less than 10

The <progress> element is the wrong element to be used for something that is just a gauge,
rather than the task progress. For example, showing the usage of disk space by using the
<progress> element is inappropriate. Instead, the <meter> element is available for this type of
use cases.

Examples

Progress

The <progress> element is new in HTML5 and is used to represent the progress of a task

<progress value="22" max="100"></progress>

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;

https://riptutorial.com/ 119