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.

tamarintech · Accepted Answer · 2015-12-29T12:30:42.763

6

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.

edited Dec 29 '15 at 12:30

answered Mar 25 '11 at 15:54

tamarintech

1,972
12
17

Odd. I can't view the page source for that page. Oh well. – crackedcornjimmy Mar 25 '11 at 15:59
there is no page source as you are viewing image content in the browser, not html – Tim B James Mar 25 '11 at 16:02
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. – tamarintech Mar 25 '11 at 16:04
Updated. Wow, was this a long time ago! :) – tamarintech Dec 29 '15 at 12:31

score 6 · Answer 2 · answered Mar 25 '11 at 15:56

6

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

answered Mar 25 '11 at 15:56

wildcard

7,353
3
27
25

I have the throbber. And thanks for the link! That's pretty sweet. Anyway, I'm more looking for how to run it. – crackedcornjimmy Mar 25 '11 at 16:00

score 2 · Answer 3 · answered Mar 25 '11 at 18:48

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.

I need examples for adding a throbber during page loads

3 Answers3