Sets or gets whether the loader will be shown after it's creation.

Code examples

Set the autoOpen property.

$('#jqxLoader').jqxLoader({ autoOpen: true }); 

Get the autoOpen property.

var autoOpen = $('#jqxLoader').jqxLoader('autoOpen'); 

Sets or gets the loader's height.

Code examples

Set the height property.

$("#jqxLoader").jqxLoader({ height: 150 });

Get the height property.

var height = $('#jqxLoader').jqxLoader('height');

Sets the loader's content.

Code example

Set the html property.

$("#jqxLoader").jqxLoader({html: "Next Loading" });

Sets or gets whether the loader is displayed as a modal dialog. If the jqxLoader's mode is set to modal, the loader blocks user interaction with the underlying user interface.

Code examples

Set the isModal property.

$('#jqxLoader').jqxLoader({ isModal: true }); 

Get the isModal property:

var isModal = $('#jqxLoader').jqxLoader('isModal'); 

Sets or gets the image's position. Possible values: 'top', 'bottom' and 'center'

Code examples

Set the imagePosition property.

$('#jqxLoader').jqxLoader({ imagePosition: 'center' }); 

Get the imagePosition property:

var imagePosition = $('#jqxLoader').jqxLoader('imagePosition'); 

Sets or gets a value indicating whether widget's text is aligned to support locales using right-to-left fonts.

Code examples

Set the rtl property.

$("#jqxLoader").jqxLoader({ rtl: false});

Get the rtl property.

var rtl = $('#jqxLoader').jqxLoader('rtl');

Sets or gets the loader's text.

Code example

Set the text property.

$("#jqxLoader").jqxLoader({text: "This is a loader..." });

Get the text property.

var text = $('#jqxLoader').jqxLoader('text'); 

Sets or gets the alignment.

Code examples

Set the textPosition property.

$("#jqxLoader").jqxLoader({ textPosition: "left" });

Get the textPosition property.

var textPosition = $('#jqxLoader').jqxLoader('textPosition'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
                                                                                          
  <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
                                  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the jqxLoader's width.

Code example

Set the width property.

$('#jqxLoader').jqxLoader({ width: '150px' });

Get the width property.

var width = $('#jqxLoader').jqxLoader('width');

This event is triggered when the user creates loader for the first time.

Code examples

Bind to the create event by type: jqxLoader.

$('#jqxLoader').on('create', function () { // Some code here. }); 

Closing the current loader.

Code example

Invoke the close method.

$('#jqxLoader').jqxLoader('close');
                        

Opening/showing the current loader. You can optionally call the method with left and top arguments

Code example

Invoke the open method.

$('#jqxLoader').jqxLoader('open');