skip to content

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.

Method of indicating a progress state.