Explain how the markers work
Explain how the markers work
Explain how the markers work
Explode
Progress: Pause

How it works

Normally you'd want to have two divs right on top of each other. The first div would have the content with the regular style, and the second div would have the exact same content, and the exact same style that relates to size, but with different colors. Once you have that, you can resize the 2nd div to clip the contents and create a progress bar effect. The problem is that browsers don't do sub-pixel rendering of divs. Which means that if you set the width of a div to 10.2px, it'll round it down to 10px. This results in the progress bar advancing in whole pixels, which feels bad when progression is slow (as in this demo). We solve this by introducing a 3rd div. It sits between the two divs and is styled exactly the same as the progress div, but its width is 1 pixel larger than the progress bar. We then set the opacity to the remaining fraction of the width. That is, if we want a 10.2px progress bar, we set the regular progress div to 10px, and the faded div to 11px. Then we set the opacity of the faded div to 0.2. This gives a much smoother motion (although I suspect the browsers don't blend colors in linear space, so we can probably improve that even further by blending the colors manually instead of setting the opacity).