I need examples for adding a throbber during page loads

Question

Does someone have a code example of running an animated throbber during asp.net page loads? More than one example would be appreciated.

Lukasz

Answer 1

A throbber is generally just an animated .gif that holds the place of content. When the content is loaded, that image is hidden or removed from the dynamic element and replaced with the actual content (or vice versa if you're making a form or similar).

Here's a link to the Facebook "throbber" - http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/GsNJNwuI-UM.gif

Here's a link to a Wikipedia asset: https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif

Matching article: https://en.wikipedia.org/wiki/Throbber

As you can see, it's an animated gif.

Update: If you're still using this for reference then please check out the CSS throbbers in various projects.

Boleslaw

Odd. I can't view the page source for that page. Oh well. – Lukasz

there is no page source as you are viewing image content in the browser, not html – Wernsman

Chrome or Firebug will let you inspect the individual elements. If you have a page with a similar throbber, try causing the content to load (f5, or hit something on the page to trigger the content) and press the ESC key to stop it from loading while the throbber is visible. Then you should be able to use common tools to inspect the visible element. – Boleslaw

Updated. Wow, was this a long time ago! :) – Boleslaw

Answer 2

On http://ajaxload.info/ you can generate your own :)

Aleurone

I have the throbber. And thanks for the link! That's pretty sweet. Anyway, I'm more looking for how to run it. – Lukasz

Answer 3

You can use asp.net AJAX UpdateProgress control. Put your throbber image in the ProgressTemplate.

The issue with that is you will have to use UpdatePanel for that. If you are already using it nice.

Another options you might want to look into:

Use jQuery to show/hide your throbber.

jQuery UI's progressbar plugin.

Deme