Note we require extra <span> tags because the <progress> tag is an empty
tag (like <img>), and so it can't have ::before or ::after
pseudo-elements. There's a workaround for that, but currently it only
works on Chrome.
For some reason, the text seems to be slightly misaligned vertically in
all implementations I've tried. So the `top: -0.1rem` rule is a hack to
align it properly.