dotsLoader.jquery.js

(function ($) {

  var idx = 0;

  $.fn.dotsLoader = function (cmd, options) {

    var api = {
      toggle: function () {
        api[this.data('loader-id') ? 'hide' : 'show'].apply(this, arguments);
      },
      show: function (opts) {

        var settings = $.extend(true, {}, $.fn.dotsLoader.defaults, opts);

        return this.each(function () {
          var $target = $(this),
            $ph = settings.appendTo ? $target.find(settings.appendTo) : $target,
            id = 'dots_load_' + (idx++),
            curPos = $ph.css('position'),
            $loader = $(settings.loaderHtml).attr('id', id).css(settings.css);
          if (settings.mask) {
            $loader.addClass('loading-mask');
          }
          $ph.prepend($loader).css({position: 'relative'});
          $target.addClass(settings.parentCls).data({'loader-id': id, 'loader-ph-pos': curPos, 'loader-settings': settings});
        });

      },
      hide: function (opts) {

        return this.each(function () {
          var $target = $(this),
            id = $target.data('loader-id');
          if (id) {
            var $loader = $('#' + id),
              loaderSettings = $target.data('loader-settings'),
              $ph = $loader.parent(),
              curPos = $target.data('loader-ph-pos');
            $loader.remove();
            $ph.css({position: curPos});
            $target.removeClass(loaderSettings.parentCls).data({'loader-id': null, 'loader-ph-pos': null, 'loader-settings': null});
          }
        });

      }
    };

    if (typeof cmd !== 'string') {
      options = cmd;
      cmd = 'toggle';
    }
    return api[cmd].call(this, options);
  };

  $.fn.dotsLoader.defaults = {
    loaderHtml: '<div class="loader-ph"><div class="loader"></div></div>',
    appendTo: null,
    mask: true,
    parentCls: 'loading',
    css: {
      zIndex: 1000
    }
  };

})(jQuery);