Подтвердить что ты не робот

Javascript spinning wait песочные часы

Я хотел бы указать пользователю веб-приложения, что выполняется длительная работа. Когда-то это понятие было бы сообщено пользователю, показывая песочные часы. В настоящее время это кажется анимированным кругом. (например, когда вы загружаете новую вкладку в Firefox или загружаетесь в Mac OS X. По совпадению, переполненный стек в логотипе stackoverflow выглядит как одна четверть круга).

Есть ли простой способ создать этот эффект с помощью Javascript (в частности, JQuery)? В идеале я хотел бы, чтобы один из этих маленьких прядильников был элементом в таблице, чтобы указать пользователю, что система все еще активна при обработке ожидающей задачи (т.е. Она не забыта или не разбилась). (Разумеется, я понимаю, что исходный код разбился, и интерфейс все еще отображается как оживляющая игра, это больше для психологической цели пользователя, видящего активность).

И как вы это называете?

4b9b3361

Ответ 1

Google "Индикатор активности Ajax", чтобы найти множество изображений и генераторов изображений (само "вращающееся" изображение является анимированным GIF).

Вот одна ссылка, чтобы вы начали: http://www.ajaxload.info/

С изображением в руке используйте JQuery для переключения видимости изображения (или, возможно, его родительского тега DIV). См. Эту ссылку для получения дополнительной информации:

http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

гр

Ответ 2

этот сайт сделает это за вас:

ajaxload

и на OS X он назвал "Beachball", и мне нравится добавлять "Of Death".

Ответ 3

http://preloaders.net/en/letters_numbers_words хорош и имеет множество категорий в меню слева, которые предлагают более http://ajaxload.info, а также опции размера и фона... ajaxload выглядит довольно устаревшим в наши дни.

Ответ 4

Я предполагаю, что вы имели в виду что-то, указывающее фоновая активность во время вызова Ajax.

Я имею тенденцию иметь класс CSS, который устанавливает фоновое изображение в маленький анимированный GIF, с соответствующим заполнением и позиционированием (не забудьте выключить фоновое повторение), а затем добавьте и удалите этот класс, используя пару JavaScript-помощников, вызванных когда запускается вызов Ajax и когда выполняется обратный вызов ответа.