Loader

Simple jQuery plugin to show visual feedback when loading data or any action that would take time

Name	Version	License	Repository
isLoading	1.0.6	MIT	https://github.com/hekigan/is-loading

Contents
Usage
Options
- Default options:
Exampls

Usage

Basic Loading:

This is the most basic setup. Just use $('selector').loader(); and you are done for the setup. When your action (data loading, etc…) is done, just call $('selector').loader('hide'); and you are done.

$('selector').loader();

Stop:

$('selector').loader('hide');

Load side element

This demo shows how to show the loading message inside the target.

$('selector').loader({ position: 'right' });

Load in element

This demo shows how to show the loading message inside the target.

$('selector').loader({ position: 'inside' });

Overlay

$.loader();

Overlay on element

$('selector').loader({ position: 'overlay' });

Add a text in the loader

$('selector').loader({ text: 'Sending...' });

Disable some extra elements

If you want to disable some extra tags/input/etc… while the loading is active, you can use the disableOthers[] option.

$('selector').loader({
  text: 'Sending',
  disableOthers: [
    $('#demo .form-control'),
    $('#demo .btn')
  ]
});

Options

Name	Type	Default	Description
position	boolean	block	loader 출력 위치 및 형태 설정. `block` \| `right` \| `inside` \| `overlay` 3 가지 사용 가능
text	string	null	loader 출력시 표시되는 문구
theme	string	default	Theme를 설정 할 수 있다.
tpl	string	`<span class="loader-wrapper %wrapper% %theme%"><i class="loader">Loading...</i>%text%</span>` Loader template
disableSource	boolen	true	loader 출력시 주변 엘리먼트에 `disabled` attribute 또는 class를 추가
disableOthers	Array	[]	설정된 엘리먼트들에 `disabled` attribute 또는 class를 추가

Default options:

defaults = {
  'position': 'block',        // block | right | inside | overlay
  'text': '',                 // Text to display next to the loader
  'theme': 'default',    // loader CSS theme
  'tpl': '<span class="loader-wrapper %wrapper% %theme%"><i class="loader">Loading...</i>%text%</span>',
  'disableSource': true,      // true | false
  'disableOthers': []
};

Exampls

Customized Loader

<style>
  .loader-overlay {...}
  .loader-overlay .loader-wrapper.myLoader {...}
</style>

$('selector').loader({
  theme: 'myLoader',
  tpl: '..'
});

$(".btn").tap(function() {

  $('#myModal').modal('show');
  $("#myModal p").html("");
  $("#myModal .content").loader({
    text:       "Loading...",
    position:   "overlay"
  });

  setTimeout(function() {
    $("#myModal .content").loader("hide");
    $("#myModal p").html("Hello World");
    $.notify("Content Loaded")
  }, 1000);

});

Loader in Page

$(".btn").tap(function() {

  $('#page-target').page({start: "#page-start"});
  $("#page-target p").html("");
  $("#page-target .content").loader({
    text:       "Loading...",
    position:   "overlay"
  });

  setTimeout(function() {
    $("#page-target .content").loader("hide");
    $("#page-target p").html("Hello World");
    $.notify("Content Loaded");
  }, 1000);

});

Controls