Как вывести заглушку при ожидании ajax запроса?

Question

[Дмитрий Скогорев]

Всем доброго дня. Прошу помощи.
есть обычный ajax post/get запрос
как сделать затемненное окошко с индикатором ожидания (наподобие того как это выглядит у ios) от начала запроса до того момента как придёт ответ?
заранее благодарю

Answer 1

[mletov]

Примерно так:

1) Создать div: width: 100%, height: 100%, opacity: например, 0.5, position:fixed, display:none, background:Цвет фона
2) Перед вызовом ajax сделать этому div display:block; (например, по нажатию на кнопке или почему там в сценарии вызывается запрос)
3) В success колбэке ajax сделать диву display:none

PS: Внутрь дива разместить анимированный гиф загрузчика, надпись "Page loading..." или что-нибудь еще по своему вкусу

Answer 2

[Сергей Иванов]

www.aplusdesign.com.au/demos/ajax-loader/index.html

Answer 3

[Виталий Инчин ☢]

У XMLRequest есть метод onprogress. Клац.

Answer 4

[Dexmaster]

Нужно вынести элемент с фоном GIF нужного вам лоадера и спрятать (display:none).
Перед началом AJAX запроса показываем его (display:block).
После окончания обработки запроса скрываем (display:none), все.

Вариант c jQuery / Вариант pureJS
(Для тестов задержка выставлена на 3 секунды)

P.S.
Как альтернативу можно использовать псевдоэлемент .loading:after и просто добавлять в нужном месте клас elem.classList.add('loading')/elem.classList.remove('loading'), если интересно могу создать пример.