Javascript вращает ожидание типа песочных часов

Question

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

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

И вообще, как ты называешь эту вращающуюся штуковину?

Answer 1

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

Вот одно звено чтобы вы начали.

Имея изображение в руках, используйте jQuery для переключения видимости изображения (или, возможно, его родительского тега DIV).Видишь эта ссылка для получения дополнительной информации.

rp

Answer 2

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

ajaxload

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

Answer 3

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

Answer 4

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

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