Examples/Demos

Basic usage

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

      $('#right_menu').oLoader();
      

This code will show loading overlay over element with ID = "right_menu"

Execute code
      $('#right_menu').oLoader('hide');
      

And this one will hide the loader.

Execute code

Styling the oLoader

      $('#right_panel').oLoader({
        backgroundColor: '#fff',
        fadeInTime: 500,
        fadeLevel: 0.8,
        image: 'images/ownageLoader/loader3.gif',
        style: 3,
        imagePadding: 5,
        imageBgColor: '#fe0',
        hideAfter: 1500
      });
      
Execute code

Custom style

      $('#right_panel').oLoader({
        backgroundColor: '#000',
        fadeInTime: 500,
        fadeLevel: 0.4,
        style: "<div style='position:absolute;left:10px;bottom:10px;background:#000;color:#fff;padding:5px;border-radius:4px'>Loading...</div>",
        hideAfter: 1500
      });
      
Execute code

Whole window overlay with disabled scrollbar

      $('body').oLoader({
        wholeWindow: true, //makes the loader fit the window size
        lockOverflow: true, //disable scrollbar on body
        
        backgroundColor: '#000',
        fadeInTime: 1000,
        fadeLevel: 0.4,
        image: 'images/ownageLoader/loader4.gif',  
        hideAfter: 1500
      });
      
Execute code

Background of the overlay

      $('body').oLoader({
        wholeWindow: true,
        backgroundColor: "url('http://js.ownage.sk/temy/jakub_sedlacek/images/bg1.jpg') top center",
        fadeLevel: 1,
        fadeInTime: 1000,
        image: 'images/ownageLoader/loader4.gif',
        hideAfter: 1500
      });
      

Note: It won't work if you add ";" at end.

Execute code

IMG waitLoad demonstration

      $(function(){
        $('img').oLoader({
          waitLoad: true,
          fadeLevel: 0.9,
          backgroundColor: '#fff',
          style:0,
          image: '/images/ownageLoader/loader5.gif'
        });
      });
      
Open demo page

Effects (experimental)

Door

      $('body').oLoader({
        wholeWindow: true, 
        effect:'door',
        hideAfter: 1500
      });
      
Execute code

Slide

      $('body').oLoader({
        wholeWindow: true, 
        effect:'slide',
        hideAfter: 1500
      });
      
Execute code

DoorNSlide

      $('body').oLoader({
        wholeWindow: true, 
        effect:'doornslide',
        hideAfter: 1500
      });
      
Execute code

AJAX examples

Example 1

#ajax-example-1
      $('#ajax-example-1').oLoader({
        url: 'ajax-test.html'
      });
      
Execute code

Example 2

updateOnComplete: false demonstration

#ajax-example-2
      $('#ajax-example-2').oLoader({
        url: 'ajax-test.html',
        updateOnComplete: false
      });
      
Execute code

Example 3

Show loader in first element and set the server response to the other element.

#ajax-example-3-1
#ajax-example-3-2
      $('#ajax-example-3-1').oLoader({
        url: 'ajax-test.html',
        updateContent: false, //this will not update content in #ajax-example-3-1
        complete:function(successData) {
          $('#ajax-example-3-2').html(successData);
        }
      });
      
Execute code

Example 4

ajax-test-2.php:

      <?php
        $name = htmlspecialchars(stripslashes($_POST['name']));
        $color = htmlspecialchars(stripslashes($_POST['favoriteColor']));
        
        echo "Hello ".$name."!
"; echo "I like ".$color." too. :)"; ?>
#ajax-example-5

Your name:
Your favorite color:
Execute code below

      var yourName = $('#example-5-input-1').val();
      var yourColor = $('#example-5-input-2').val();
      $('#ajax-example-5').oLoader({
        url: 'ajax-test-2.php',
        type: 'POST',
        data: 'name=' + yourName + '&favoriteColor=' + yourColor
      });