Search code examples
htmlprogress-barprogress

Progress bar with an image

I wanted to know if it is possible to style the Progress bar introduced by HTML5 in such a way that I can put an image in it. To be more concrete, let's imagine a car ride from a city to another. I want to display the evolution of the car in a progress bar. 

<progress id='movingbar' value="50" max="200"></progress>

But to be more stylish, I want this progress bar to display an image of a car at the position of the "value".

I've not found any website discussing about it. If it's not possible to do it using HTML5 tag, then is it possible by another way ?

Thanks beforehand

Solution

  • This page here changes the background images of the progress bar.

    http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/