How to add css loading animation in ajax beforeopen page

Question

I have one question about loading animation.

How can i add my CSS loading animation in my ajax like before open page anyone can help me in this regard ?

HTML

<div id="loader"></div>

AJAX

$(".cabi").click(function(){
   $(this).css('left',($(window).width()-$(this).outerWidth())/ 2 + 'px'); 
   $(this).css('top',($(window).height()-$(this).outerHeight())/ 2 + 'px'); 
   $('body').css('overflow', 'hidden');
   event.preventDefault();
   var id = $(this).data("id");
   $.ajax({
     url: "info.php?info_id="+id,
     type: 'get',
   }).done(function(data) {
      $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);
      imgResize(jQuery,'smartresize');   
   });

});

$(".sidebar").click(function(){
    $(".sidebar-content").animate({"right":"-565px"},200,function(){
        $(".sidebar").fadeOut(); 
        $('body').css('overflow', 'auto');  //ADD THIS  
    }) 

});
$(".sidebar-content").click(function(e){ 
    e.stopPropagation();

});

Question is very clear. I asked only how can i add css lading animation. Why someone give me -vote? — user4082764
– user4082764, Commented Jan 17, 2015 at 14:26
That's what I was exactly searching for and I don't get why people downvote such a question? Apparently, we all aren't equals in some areas and seeking for help. That was helpful, thanks for asking such a question. — baymurat
– baymurat, Commented Sep 19, 2021 at 11:03

Jogjakal · Accepted Answer · 2015-01-17 14:29:44Z

1

firstly, make sure #loading must be display:none;, and then just add beforeSend method in your $.ajax();, like this one :

$.ajax({
    url: "info.php?info_id="+id,
    type: 'get',
    beforeSend: function(){
       $("#loading").fadeIn(100);
    },
}).done(function(data) {
   $("#loading").fadeOut(100);
   $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);
   imgResize(jQuery,'smartresize');   
});

visit jquery ajax docs http://api.jquery.com/jquery.ajax/

hopefully helping.

answered Jan 17, 2015 at 14:29

Jogjakal

753 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add css loading animation in ajax beforeopen page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related