HTML <progress> Tag

19-09-2019

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.

Method of indicating a progress state.