Which browsers

The goal from the outset was to get this working in latest versions of Chrome, Safari, Firefox, Edge, and maybe Internet Explorer.

Progress HTML

The <progress> element has a max attribute and a value attribute. The max attribute must be a value greater than 0. If you don’t set the max value, it defaults to 1. The value is a number between 0 and max value.

For the sake of this article, I won’t get into indeterminate progress bars, which don’t have a value set.

Styling progress

All browsers provide their own styling of the <progress> element but this is easily overwritten. Just start setting some styles!

progress {
background-color: white;
border: 1px solid blue;
/* and so on and so on */
}

(Many tutorials will tell you to set the appearance — and all of its vendor-prefixed equivalents — to none, but that’s not necessary now.)

In Blink and Webkit, you might be wondering why the background colour of the progress bar didn’t actually change. For that, you need to target a pseudo-element.

::-webkit-progress-value {
background-colour: white;
}

Excellent.

Now we need to style the bar that shows us the progress. The, um, progress bar. Each browser is a bit different in their choice of naming.

Let’s Animate!

For Chrome and Safari, we can simply set a transition on the width of the progress bar.

::-webkit-progress-value {
transition: width 1s;
}

* chef kisses fingers *

Hellfirefox

One would wish/hope/desire that setting a simple transition would also work for Firefox but you’d be wrong. Each browser has certain things that you’re not allowed to do with each of the elements.

In Firefox, you can’t set a transition on the width. You also can’t modify the width. But you can transform it. And you can transition other properties.

I suspect there’s an easier way to do this but this is where my mind went: let’s animate padding-bottom!

Animating padding-bottom means that I could get the height of the progress bar to equal the width of the progress bar. The problem is that it’s going in the wrong direction. For that, I transform the progress bar to rotate it 90 degrees, getting it to animate to the right, just like we want it!

We set the transform-origin to 0 0 to put it in the top left corner. (You can also specify top left but 0 0 takes up less bytes.)

The progress bar will now grow up instead of to the right. (When we set the --value custom property, it’ll grow up and to the right.)

If we just did the rotation, the progress bar would sit on top of progress area. We need to shift it down. (Which, since, we’ve rotated 90 degrees, is actually to the left.) We need to use translate to shift the element the height of the progress area. In my example, it’s 15px in height, so shift the element down 15px. If it was 30px in height, you’d shift it down 30px.

Now that it’s rotated, the height of the bar changes when the value changes. If it’s longer than the height of the progress area, it’ll obscure other things on the page. We can fix this by setting clipping the overflow on the progress element.

progress {
overflow: hidden;
}

Also due to the rotation, the height of the progress bar (which defaults to the height of the progress area) will affect the width of the rotated bar. Therefore, we need to set the height of the progress bar to 0.

::-moz-progress-bar {
height: 0;
}

With all that done, we can set the value of the custom property to the same value as the value attribute.

p.style.setProperty('--value', val + '%');

Like butter!

But I want no/different animation in IE and Edge

“Uh, look over there!” * runs away *

There’s no way to turn off or adjust the animation or transition timing for the progress bar in IE or Edge (that I have found).

(It looks like Microsoft actually has a wrapping element and animates that. That wrapping element clips the ::-ms-fill element, preventing any adjustments to animation from happening.)

Adlibweb is a company specialised in global digital marketing solutions including digital marketing strategy, content creation management, web design, social outreach programs, social media management and other mundane, but totally necessary tools such as technical search engine optimization and pay per click campaigns. Our mission is to help you market your product or service using digital channels.