Using the Element, with a Fallback

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:
<progress>
<img alt="Loading..." src="spinner.gif" />
</progress>

Which looks like this:
Loading...

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

Idea from:
http://adactio.com/journal/5857/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s