<button id="ajax">ajax</button>
<ul id="list"></ul>
<div class="loading is-hide">
  <div class="loading_icon"></div>
</div>
.is-hide{
 display:none; 
}
.loading{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,.5);
}
.loading::before{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  border-radius:5px;
  margin-top:-15px;
  margin-left:-15px;
  background:white;
}
.loading::after{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  border-radius:20px;
  margin-top:-10px;
  margin-left:-10px;
  border:4px solid #60ABB9;
  border-right:4px solid white;
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}
$("#ajax").click(function(){
    var $loading = $(".loading");
    $.ajax({
        url:"https://avia-avia.ru/uvedomlenie.php",
        dataType:"json",
        beforeSend:function(){
            $loading.removeClass("is-hide");
        },
        success: function(data){
            $loading.addClass("is-hide");
            data.items.forEach(function(item){
                $("#list").append("<li>"+item.title+"</li>");
            });
        }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js