Loading em Ajax

ajax-loading.js

var modalGenerico = {
  abrir: function (conteudo, callback) {
      var self = this;

      self.fechar();
      var modal = self.modalGenerica.replace('#CONTEUDO#', conteudo);
      $("body").append(modal);
      $("body").scrollTop(0);

      $(document).off("click", "#modal-default .backdrop-modal, #modal-default .fechar-modal")
          .on("click", "#modal-default .backdrop-modal, #modal-default .fechar-modal", function (e) {
              e.preventDefault();
              self.fechar();
              if (callback && typeof callback === "function")
                  callback();
          });
  },

  abrirErro: function (conteudo, callback) {
      this.fechar();
      this.abrir("<span class='erro'></span>" + conteudo, callback);
  },

  abrirLoading: function () {
      this.fechar();
      $(document).off("click", "#modal-default .backdrop-modal, #modal-default .fechar-modal");
      $('body').append(this.modalLoading);
      $('body').scrollTop(0);
  },

  fechar: function () {
      if ($("#modal-default")) {
          $("#modal-default").remove();
      }
  },

  modalGenerica: "<div id='modal-default' class='modal-mensagens'>" +
  "<div class='backdrop-modal'></div>" +
  "<div class='content-modal'>" +
  "<span class='fechar-modal'>fechar</span>" +
  "#CONTEUDO#" +
  "</div>" +
  "</div>",

  modalLoading: "<div id='modal-default' class='modal-mensagens modal-loading'>" +
  "<div class='backdrop-modal'></div>" +
  "<div class='content-modal'>" +
  "<h3>Por favor, aguarde...</h3>" +
  "<span class='loading'></span>" +
  "</div>" +
  "</div>"
}

$.ajax({
    url: myUrl,
    type: "POST",
    data: myData,
    beforeSend: function () {
        modalGenerico.abrirLoading();
    },
    success: function () {
        modalGenerico.fechar();
        ...
    },
    error: function (xhr, status, erro) {
        modalGenerico.abrirErro("<p>Desculpe, houve um erro inesperado. " +
            "Por favor, tente mais tarde ou entre em contato com nosso suporte</p>");
    }
});