Progress

I remember when Ajax started gaining traction on the web and in the minds of developers. One of the factors that web developers suddenly had to think about was giving feedback to the user when a request was made to the server.

Normally this is something that the browser takes care of (with its rotating letter “e” or its sweeping lighthouse fresnel lens or whatever method your chosen browser uses). But once you decide to use Ajax to make a request to the server, you’re effectively saying “Hey browser, it’s okay; I got this.”

And so web developers everywhere began to recreate loading indicators that were so popular on Flash sites. Some of them are very clever, created entirely in CSS.

This is a pattern that has been codified into HTML itself. We now have a progress element. This can be used to display fine-grained progress if you give it value and max attributes, or you can simply use it without any attributes to indicate that something is happening …perfect for those Ajax requests.

<progress></progress>

What I like about this element is that you can put fallback content in between the opening and closing tags. So let’s say you’re currently using an animated .gif to show that some content is being requested via Ajax:

<img src="spinner.gif" alt="Loading...">

Now you can wrap that within a progress element:

<progress><img src="spinner.gif" alt="Loading..."></progress>

Modern browsers show the native progress indicator. Older browsers show the animated .gif.

Of course, right now your ability to style that native progress indicator is limited (the shadow DOM may change that) but, as I pointed out in my book, that may not be a bad thing:

Remember, the web isn’t about control. If a visitor to your site is familiar with using a browser’s native form doodad, you won’t be doing them any favors if you override the browser functionality with your own widget, even if you think your widget looks better.

Have you published a response to this? :

Previously on this day

8 years ago I wrote Timeless

Who knows where the time element goes?

12 years ago I wrote Silent witness

Pattern recognition in the films of Ridley Scott.

13 years ago I wrote Microformats gone wild

You can’t swing a cat without hitting a microformat these days.

14 years ago I wrote Bound for Cork

I’m going to be incommunicado for the next few days. I’m heading back to my hometown in Ireland.

15 years ago I wrote Viva La iPodDownload

I wrote a little while back about a nice little plug-in for iTunes called iPodDownload. It plugged a glaring usability hole in iTunes whereby you aren’t able to simply drag your music from your iPod to your computer.

16 years ago I wrote Oh my God, it's full of rock stars!

All went well with the Salter Cane concert last night. My bout of gastroenteritis had luckily passed by the time the gig rolled ‘round.

18 years ago I wrote The Brick Testament

Now, this is what the Internet was made for: Bible stories in Lego form.

18 years ago I wrote Movie industry dealt DVD-cracking blow

This is good news. The infamous DeCSS code is protected under free speech.

18 years ago I wrote Giant Sand

The Giant Sand concert was lots of fun.