While mobile browser support for the
<progress> element is not very good, it will get better fast, especially in 3d-party browsers, and we can start using it now, with a simple fallback:
<img alt="Loading..." src="spinner.gif" />
Which looks like this:
So, browsers that can’t handle the
<progress> will get the
spinner.gif, and browsers that can handle it, will get the modern HTML element, with no need for the image.
An additional benefit of this method is that the
<progress> element will automatically be responsive, with need for resizing, or fetching different images, etc.
And of course, you could even improve that a little by making the
spinner.gif a very basic spinner, and converting it to a Data URI…