Add Loading Spinner to JQuery UI Tab Body

Question

Is there a simple way to show a loading spinner in the body of a jquery UI tab while it is loading via AJAX?

Essentially I am looking for something like the spinner option, but displaying the graphic and a loading message in the tab body rather than the tab title.

have a look at [this question](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) — Muhammad Adeel Zahid, Jul 01 '11 at 10:04
The problem with that is that it only allows you to show or hide an existing element. My tab doesnt have a body until the ajax has loaded it in. So what I need to do is tell jquery to create the tab with a body containing the spinner, then replace it with the ajax content when complete. — Jon Eastwood, Jul 01 '11 at 10:16
you should create a hidden div on the page and show it with spinner when doing ajax rather than using same div for populating result and showing spinner. — Muhammad Adeel Zahid, Jul 01 '11 at 10:18

score 7 · Accepted Answer · edited Jul 12 '13 at 22:22

This should work with jQuery UI 1.9+ for ajax loaded tabs (assuming your tabs have id 'tabs'):

$("#tabs").tabs({
  // loading spinner
  beforeLoad: function(event, ui) {
    ui.panel.html('<img src="loading.gif" width="24" height="24" style="vertical-align:middle;"> Loading...');
  }
});

You'll need to put a loading.gif in the right place and adjust the img tag src, width and height, but I think you get the idea. You can get a bunch of spinner images at http://www.ajaxload.info/

Add Loading Spinner to JQuery UI Tab Body

1 Answers1