(function ($) {
  $.fn.showloading = function () {
    var loading = this.children(".loading");
    if (loading.length) {
      loading.show();
    } else {
      addLoadingDOM(this);
    }

    return this;
  };

  $.fn.hideloading = function () {
    var loading = this.children(".loading");
    if (loading.length) {
      loading.hide();
    } else {
    }

    return this;
  };

  function addLoadingDOM($this) {
    $this.css("position", "relative");
    var html =
      '<div class="loading" style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;align-items:center;background-color: rgba(0,0,0,0.5);">';
    html += '<img width="50px" height="50px" src="images/load.gif">';
    html += "</div>";
    $this.append(html);
  }
})(jQuery);