CODEWITHSUNDEEP
jquery-uijquery
Jon Eastwood
Jon Eastwood

Reputation: 823

Add Loading Spinner to JQuery UI Tab Body

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.

Upvotes: 4

Views: 5284

Answers (1)

redreinard
redreinard

Reputation: 2044

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/

Upvotes: 7

Related Questions