В веб приложениях, когда пользователь ожидает результаты какого-либо процесса, часто ему показывается анимированное изображение, говорящее о том, что приложение выполняет какие-то действия и пользователю нужно подождать. Чаще всего это картинка loading.gif.

Я не являюсь сторонником использования графики в веб-дизайне, потому что загрузка графики создает лишнюю нагрузку на сервер, увеличивает время ожидания при открытии страницы и в первую очередь потому что эту графику нужно специально создавать отвлекаясь от основного процесса — программирования и верстки.

Занимаясь очередным новым проектом, я задумался, как будет выглядеть loading.gif на этом сайте. Поскольку дизайн сайта в целом достаточно оригинальный, детали тоже должны выглядеть по-особому. Лезть во флеш не хотелось. Плюс, когда я пробовал сделать gif-анимацию во флеше, результат почему-то получался очень низкого качества, поэтому ранее я просто использовал loading.gif из ВКонтакте или Facebook.

В этот раз мне пришла такая идея: заменить эту картинку кодом. Здесь видится несколько вариантов. Первый — это dom-анимация. Второй — это canvas-анимация.