CODEWITHSUNDEEP
htmlcss
Awena
Awena

Reputation: 1022

css styling a loading message

Im using ajax to load some content. I do not have problem with that, I just want to know how can I style the 'loading...' message or preferably use a loader image, at the center of the screen. While content is loading the 'loading' message appear at the top left corner(leaving the entire page black ) and it does not look nice.. I was wondering if it possible.

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
  $("#content").html('loading...');
    },
   data: "Id="+Id,
   success: function(msg){
     $("#content").html(msg);
   }
   });

Where #content is the wrapper div for my page below the header (right side) and the header which contains the nav menu is styled to float left with a vertical alignment and width 250px. The template is 1200 X 700.. I tried to wrap #content with a #loader div but its not working.. any advise is appreciated. thanks

Upvotes: 0

Views: 797

Answers (1)

Francisco Presencia
Francisco Presencia

Reputation: 8860

I'd add an id to the 'loading' while doing the request and have the css handle it:

  $.ajax({
   type: "POST",
   url: "page1.php", 
   beforeSend: function () {
    $("#loading").addClass("activated");
    },
   data: "Id="+Id,
   success: function(msg){
     $("#loading").removeClass("activated");
     $("#content").html(msg);
   }
   });

To center an element with css:

Quick CSS Trick: How To Center an Object Exactly In The Center.

Upvotes: 1

Related Questions