css styling a load message

Question

Im, использующий ajax для загрузки некоторого контента. У меня нет проблем с этим, я просто хочу знать, как я могу стилизовать сообщение «загрузка ...» или предпочтительно использовать изображение загрузчика в центре экрана. Пока содержимое загружается, сообщение «загрузка» появляется в верхнем левом углу (оставляя всю страницу черным), и это выглядит не очень красиво .. Мне было интересно, возможно ли это.

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

Где #content является оболочка DIV для моей страницы ниже заголовок (справа) и заголовка, который содержит меню навигационного стилизован, чтобы плавать влево с вертикальным выравниванием и шириной 250 пикселями. Шаблон составляет 1200 X 700. Я попытался обернуть #content с #loader div, но его не работает .. любые советы приветствуются. благодаря

Answer 1

Я бы добавить идентификатор к «загрузка», делая запрос и иметь CSS справиться с этим:

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

Для центрирования элемента с помощью CSS:

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