Skip to content
Advertisement

how to add loading.. on ajax response

i have loading html css code as i pasted here,now in my ajax response Now Loading: Please Wait i want to replace it by custom html css loading page, how can i do this?

$(document).on('open.zf.reveal', "#site_modal_5", function (e) {
  var $modal = $(this);
  var ajax_url = $modal.data("ajax-url");
  if (ajax_url) {
  $modal.html("Now Loading: Please Wait ");
  $.ajax(ajax_url).done(function (response) {
    $modal.html(response);
  });
  }

});
.container {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class='loader'>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--text'></div>
  </div>
</div>

Advertisement

Answer

You can change the $modal.html('your text') with the loader’s HTML. See the snippet below.

I have added .loader-container so you can hide the loader inside as it probably should not be visible all the time. Also, you can easily use jQuery .html() to append the inner content to the modal. In this case .loader.

var $loader = $('.loader-container');
$(document).on('open.zf.reveal', "#site_modal_5", function(e) {
  var $modal = $(this);
  var ajax_url = $modal.data("ajax-url");
  if (ajax_url) {
    $modal.html($loader.html());
    $.ajax(ajax_url).done(function(response) {
      $modal.html(response);
    });
  }
});
.container {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader-container .loader {
  display: none;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}

.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}

.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}

.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}

.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}

.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}

.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}

.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}

.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}

@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class="loader-container">
    <div class='loader'>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--text'></div>
    </div>
  </div>
</div>

Another approach is to make the loader’s HTML code as a string in JS, so you can use it in the .html() for the modal as this example:

var loader = `
   <div class='loader'>
     <div class='loader--dot'></div>
     <div class='loader--dot'></div>
     <div class='loader--dot'></div>
     <div class='loader--dot'></div>
     <div class='loader--dot'></div>
     <div class='loader--dot'></div>
     <div class='loader--text'></div>
   </div>
`;

$modal.html(loader);

EDIT: This is a working example with a fake modal and ajax request. I am using setTimeout to reproduce the delay from the ajax request. Probably the error is somewhere else in your code.

Probably the best approach, if you have access to the modal’s HTML, is to add your loader code inside the modal in the HTML and change it with the ajax response when the request is ready.

var $loader = $('.loader-container');
var $btn = $('.btn-modal');

$btn.on('click', function(e) {
  var $modal = $('.modal');

  $modal.addClass('open');

  $modal.html($loader.html())

  setTimeout(function() {
    $modal.html(`<div><h2>Your response code when ajax is successfuly completed</h2></div>`)
  }, 3000);
});
.container {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader-container .loader {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 20px;
  background: teal;
  color: red;
  opacity: 0;
  visibility: hidden;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.loader {
  height: 20px;
  width: 250px;
  margin: auto;
}

.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}

.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}

.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}

.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}

.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}

.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}

.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}

.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}

.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}

@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <button class="btn-modal">Click here to open the modal</button>

  <div class="modal">
    <div class="modal__content">Modal content to be changed with loader or response</div>
  </div>

  <div class="loader-container">
    <div class='loader'>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--dot'></div>
      <div class='loader--text'></div>
    </div>
  </div>
</div>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement