Tạo hiệu ứng loading khi dùng request ajax

Chào các bạn, các bạn có ghét nhìn thấy mấy cái icon loading này không vậy mà nếu khi không có nó xuất hiện thì bạn cũng sẽ chằng hiểu là request của bạn có được gửi hay chưa!

ví dụ: như facebook, khi bạn đang ở một nơi có tốc độ mạng lên tới 1.5G rồi bạn thấy mình là người cực kì quan trọng khi thấy có tận 1 thông báo hiện lên. bạn click vào và nó chả hiện gì cả chả thông báo gì có mỗi cái form notification hiện lên trống rỗng không (ảnh đang load ajax) bạn cảm thấy hoang mang khi nhìn thấy notification nó bị lỗi rồi à!!!

Để tránh hiện tượng người dùng sản phẩm của chúng ta gặp trường hợp khó chịu trên thì một icon loading nên xuất hiện khi request có delay time. Sau đây là cách mình dùng để tạo ra cái thứ mà mọi người đều ghét nhưng vẫn phải có nó :v

$(document).ready(function () {
  $('body').on('submit', '.form-import', function(e){
    var url = "*****dia.com" #ahihi
    $('.loading').show(); #hiển thị loading
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'JSON'
      success: function (data) {
        $('.loading').hide(); # nhiệm vụ của icon loading tới đây là đã xong, tắt nó
        #...xử lý data trả về ở đây nhé
      },
      error: function(){
        $('.loading').hide(); # trả về lỗi thì hiện thị lỗi và vẫn tắt nó, không thì nó cứ xoay xoay đấy
      },
    });
    return false;
  });

Quan trọng là khi bạn bắt đầu gửi request thì hiện nó ra, xong rồi thì tắt nó đi và hiện thị ra, quá đơn giản, phần sau mình sẽ giới thiệu về progress bar khi upload một file lên server. ok xong rồi thì ứng dụng nó bạn nhé! Thank you!