{"id":96,"date":"2023-08-25T17:34:52","date_gmt":"2023-08-25T17:34:52","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=96"},"modified":"2023-08-25T17:34:52","modified_gmt":"2023-08-25T17:34:52","slug":"loader","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/loader\/","title":{"rendered":"Loader Widget"},"content":{"rendered":"

\nLoader Widget<\/span>version added: 1.2<\/span>\n<\/h2>\n
\n

Description: <\/strong>Handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. <\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
defaults<\/a><\/div>\n
disabled<\/a><\/div>\n
html<\/a><\/div>\n
text<\/a><\/div>\n
textVisible<\/a><\/div>\n
textonly<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
checkLoaderPosition<\/a><\/div>\n
fakeFixLoader<\/a><\/div>\n
hide<\/a><\/div>\n
loading<\/a><\/div>\n
resetHtml<\/a><\/div>\n
show<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

The Loader Widget<\/h2>\n\t\t

The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the $.mobile.loading<\/code> helper method (See the global method docs).<\/p>\n\t\t

To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit<\/code> event.<\/p> Below are the defaults:\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( document<\/span> ).on( "mobileinit"<\/span>, function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.text = "loading"<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.textVisible = false<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.theme = "a"<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.html = ""<\/span>;<\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
These defaults will only be superseded by the method params object described in the global method docs under $.mobile.loading<\/code>.<\/p>\n\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$.mobile.loading( "show"<\/span>, {<\/code><\/div><\/div>
  text<\/span>: "foo"<\/span>,<\/code><\/div><\/div>
  textVisible<\/span>: true<\/span>,<\/code><\/div><\/div>
  theme<\/span>: "z"<\/span>,<\/code><\/div><\/div>
  html<\/span>: ""<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t<\/div>\n
Options<\/h2><\/header>
\n
defaults \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>Boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
\n\t\tSeting this option to true<\/code> indicates that other widgets options have default values and causes jQuery Mobile's widget autoenhancement code to omit the step where it retrieves option values from data attributes. This can improve startup time.\n\t\t
This option is also exposed as a data attribute: data-defaults="true"<\/code>.<\/p>\n\t<\/div>\nCode examples:<\/strong>
Initialize the loader with the defaults<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  defaults<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the defaults<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> defaults = $( ".selector"<\/span> ).loader( "option"<\/span>, "defaults"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "defaults"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
disabled \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>Boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
\n\t\tDisables the loader if set to true<\/code>.\n\t\t
This option is also exposed as a data attribute: data-disabled="true"<\/code>.<\/p>\n\t<\/div>\nCode examples:<\/strong>
Initialize the loader with the disabled<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  disabled<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the disabled<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> disabled = $( ".selector"<\/span> ).loader( "option"<\/span>, "disabled"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "disabled"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
html \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>string<\/a>\n<\/div>\n
\nDefault: <\/strong>""<\/code>\n<\/div>\n
If this is set to a non empty string value, it will be used to replace the entirety of the loader's inner html.<\/div>\nCode examples:<\/strong>
Initialize the loader with the html<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  html<\/span>: "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' \/><h2>is loading for you ...<\/h2><\/span>"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the html<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> html = $( ".selector"<\/span> ).loader( "option"<\/span>, "html"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "html"<\/span>, "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' \/><h2>is loading for you ...<\/h2><\/span>"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
text \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>string<\/a>\n<\/div>\n
\nDefault: <\/strong>loading<\/code>\n<\/div>\n
Sets the text of the message.<\/div>\nCode examples:<\/strong>
Initialize the loader with the text<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  text<\/span>: "Loading Page..."<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the text<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> text = $( ".selector"<\/span> ).loader( "option"<\/span>, "text"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "text"<\/span>, "Loading Page..."<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
textVisible \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
If true, the text value will be used under the spinner.<\/div>\nCode examples:<\/strong>
Initialize the loader with the textVisible<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  textVisible<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the textVisible<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> textVisible = $( ".selector"<\/span> ).loader( "option"<\/span>, "textVisible"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "textVisible"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
textonly \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
If true, the "spinner" image will be hidden when the message is shown.<\/div>\nCode examples:<\/strong>
Initialize the loader with the textonly<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  textonly<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the textonly<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> textonly = $( ".selector"<\/span> ).loader( "option"<\/span>, "textonly"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "textonly"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
theme \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>String<\/a>\n<\/div>\n
\nDefault: <\/strong>null, inherited from parent<\/code>\n<\/div>\n
\n\t\tSets the color scheme (swatch) for the loader widget. It accepts a single letter from a-z that maps to the swatches included in your theme.\n\t\t
Possible values: swatch letter (a-z).<\/p>\n\t\t
This option is also exposed as a data attribute: data-theme="b"<\/code>.<\/p>\n\t<\/div>\nCode examples:<\/strong>
Initialize the loader with the theme<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loader({<\/code><\/div><\/div>
  theme<\/span>: "b"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the theme<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> theme = $( ".selector"<\/span> ).loader( "option"<\/span>, "theme"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loader( "option"<\/span>, "theme"<\/span>, "b"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>
Methods<\/h2><\/header>
\n
checkLoaderPosition()Returns: jQuery<\/a> (plugin only<\/a>)<\/span>\n<\/h3>\n
Check position of loader to see if it appears to be "fixed" to center.\n\t\t\t<\/div>\n