jQuery Loading Plugin Examples

Basic usage

This div is always loading

Starting

This div will start loading if you click it

Stopping

This div will stop loading if you click it

Toggling

This div is toggling the loading state

Custom animation

This div has a custom start / stop animation

Themes

This div has a different theme (green)

Custom message

This div has a custom loading method

Body loading

Full list of options

Option Default value Comments
message Loading... Message to be rendered on the overlay content
theme light Theme to be used for the overlay element. If this options is set to, e.g., whatever then the class .loading-theme-whatever will be applied to the overlay element
stoppable false Setting this option to true will make the loading state be stopped if the overlay element is clicked by the user. This option does not override the onClick option
onStart loading.overlay.fadeIn(150) Function to be executed when the loading state is started. Receives the loading object as parameter
onStop loading.overlay.fadeOut(150) Function to be executed when the loading state is stopped. Receives the loading object as parameter
onClick - Function to be executed when the overlay is clicked. Receives the loading object as parameter

Methods of Interest

Method Comments / Example
resize Recalculate and apply new dimensions and position to the overlay, based on the state of the target element. Call this method if the the overlay is not being shown on the right position and/or dimensions. Example: $('#some-loading-element').loading('resize')
start Turn on the loading state of some element. Example: $(...).loading('start')
stop Turn off the loading state of some element Example: $(...).loading('stop')
toggle Turn on or off the loading state of some element, depending of the current state Example: $(...).loading('toggle')
options Change some element's loading options at runtime Example: $(...).loading('options', { stoppable: true, ... })
$.Loading.setDefaults Extend the Loading plugin default options Example: $.Loading.setDefaults({ theme: 'blurred', message: 'Loadingdingdingding' })
:loading selector Get the elements that are loading or check if some element is loading.
Examples:
$(':loading') will return all the elements that are currently loading.
$('#some-element').is(':loading') will return whether the element is currently loading or not