Javascript вращается, ожидая, как песочные часы
Я хотел бы указать пользователю веб-приложения, что выполняется длительная задача. Когда-то эта концепция была передана пользователю посредством отображения песочных часов. В настоящее время это кажется анимированным вращающимся кружком. (например, когда вы загружаете новую вкладку в Firefox или загружаетесь в Mac OS X. По совпадению, переполненный стек в логотипе stackoverflow выглядит как четверть круга).
Есть ли простой способ создать этот эффект с помощью Javascript (в частности, JQuery)? В идеале я хотел бы иметь один из этих маленьких счетчиков в качестве элементов в таблице, чтобы указать пользователю, что система все еще активна при обработке ожидающей задачи (т.е. она не забыла и не сломалась). (Конечно, я понимаю, что возможно, что серверная часть вышла из строя, а интерфейс все еще отображается как анимированная вращающаяся вещь, это больше для психологической цели пользователя, наблюдающего за активностью).
И вообще, как вы называете эту крутящуюся штуку?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
этот сайт сделает это за вас:
а в OS X это называется «Beachball», и я люблю добавлять «Of Death».
Я предполагаю, что вы имели в виду что-то, чтобы указать фоновую активность во время вызова Ajax.
У меня, как правило, есть класс CSS, который устанавливает фоновое изображение в небольшой анимированный GIF с соответствующими отступами и позиционированием (не забудьте отключить повторение фона), а затем добавить и удалить этот класс с помощью пары помощников JavaScript, вызываемых, когда Ajax вызов запускается, и когда выполняется обратный вызов ответа.
Google Индикатор активности Ajax, чтобы найти множество изображений и генераторов изображений (само «вращающееся» изображение - это анимированный GIF).
Вот одна ссылка, чтобы вы начали.
Имея изображение в руке, используйте JQuery для переключения видимости изображения (или, возможно, его родительского тега DIV). См. эта ссылка для получения дополнительной информации.
rp
http://preloaders.net/en/letters_numbers_words хорош и имеет множество категорий в левом меню, которые предлагают больше, чем http://ajaxload.info, плюс параметры размера и фона ... ajaxload в наши дни выглядит довольно устаревшим.
Preloaders.net больше не бесплатен, по крайней мере, для коммерческого использования. На момент написания у них также есть ограниченное количество бесплатных некоммерческих возможностей.
Не когда вы загружаетесь или закрываете OS X, это не так.