jQuery oLoader (includes oPageLoader)

Documentation

Options

jQuery oLoader lets you easily customize all of its components such as loading image, background, complete callback function and much more.

Here are the options you can customize (with the default values):

      {
        image: 'images/ownageLoader/loader1.gif',
        style: 1,
        modal: true,
        fadeInTime: 300, //time in milliseconds
        fadeOutTime: 300,
        fadeLevel: 0.7, //overlay opacity (values 0 - 1)
        backgroundColor: '#000',
        imageBgColor: '#fff', //background under the loader image
        imagePadding: '10',
        showOnInit: true,
        hideAfter: 0, //time in ms
        url: false,
        type: 'GET',
        data: false,
        updateContent: true,
        updateOnComplete: true,
        showLoader: true, //shows the loader image
        effect: '',
        wholeWindow: false, //when true, oLoader covers the whole window
        lockOverflow: false, //locks body's overflow while loading
        waitLoad: false, //oLoader will hide after element is loaded (works on imgs, body and iframes)
        checkIntervalTime: 100, //interval which checks for position changes
        
        //callback functions
        complete: '', //executes on complete
        onStart: '', //executes when animation starts
        onError: '' //executes when ajax request fails
      }
      

Options above which doesn't have comments next to it are described below:

image

Type: String

This option contains the path of the loading image.

Animated images that come with jQuery oLoader (images/ownageLoader/):

loader1.gif	loader2.gif
loader3.gif	loader4.gif
loader5.gif	loader6.gif
loader7.gif

These gifs are generated with ajaxload.info

Note: It is recommended to set this option manually, because the default value for this option is a relative path, so it won't work in other directories except the base dir.

style

Type: Integer (0-4) / String

Sets the look of the loader. Predefined styles in oLoader: 0, 1, 2, 3, 4

If you put a string to this option, it won't show loader image, but will show the content of the style option, so you can create some crazy custom things here.

modal

Type: Boolean - if false, then it doesn't show overlay over the element

backgroundColor

Type: String

Sets the color of the overlay. You can also use image as background since this option is appended to CSS background property.

Using image as background - backgroundColor: 'url(imagePath) no-repeat center'

showOnInit

Type: Boolean - if false, it can be shown afterwards by using -  $('#yourElement').oLoader('show');

url, type, data

Type: String

If you wanna do ajax call, then use these 3 options.

url - URL to which the request is sent.

type - The type of request. (GET or POST)

data - Data to be sent to the server.

Note: This may not work on your local machine.

updateContent

Type: Boolean - if false, content of the element is not replaced by ajax response. You can work with the ajax server response in "complete" callback function.

updateOnComplete

Type: Boolean
- true - content is replaced by server response after all animations are done
- false - content is replaced by server response immediately

effect

Type: String

There are 3 experimental effects available:

- "door"
- "slide"
- "doornslide"

Callback functions

onStart

This function is called when the loader animation starts.

        onStart: function() {
          //do the magic
        }
        

complete

This function is called after all animations are over

        complete: function(successData) {
          //do the magic
        }
        

If ajax call was performed, successData contains the server response.

onError

This function is called when AJAX request fails.

        onError: function(jqXHR, textStatus, errorThrown) {
          //do the magic
        }
        

Commands

show

If you intialize oLoader with the option showOnInit set to False, you can use the show command to show it.

Usage:

      $('#yourSelector').oLoader('show');
      

hide

The oLoader can be hidden whenever you want by using this command.

      $('#yourSelector').oLoader('hide');