HTML <progress> Tag
This week we're looking at the <progress> tag.
The <progress> tag offers a method of indicating a progress state. Thus it represents the completion
of a task, like loading a site, downloading a file and so on.
The progress tag takes two attributes: max which represent the maximum value
and value which represents the current value.
Styling
WebKit/Blink provides two pseudo classes for styling the progress element: -webkit-progress-bar which lets you modify the progress element container,
and -webkit-progress-value which is used for styling the value inside the container.
Start by resetting the styles:
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
-webkit-progress-bar
<progress max="100" value="65"></progress>
progress::-webkit-progress-bar {
background: red;
}
-webkit-progress-value
<progress max="100" value="65"></progress>
progress::-webkit-progress-value {
background: red;
}
Example
See the Pen HTML Progress Test by Tristan White (@triss90) on CodePen.
Browser Support
The <progress> tag is widely supported. Besides iOS Safari which only partly supports it,
every other browser offers full support.