CSS3 и JQuery варианты создания анимации загрузки (спиннер – spinner)

preload trobber coolКрупнейшие ресурсы для анимации загрузки с помощью CSS3 и JQuery теперь в ваших руках. Вы будете удивлены, когда увидите красивую анимацию, которую мы представляем для Вас в наилучшем исполнении. Раньше, перед загрузкой, анимация была жестко задана и была ограничена форматом Gif, с помощью которого и реализовывались так называемые тробберы/спиннеры – картинки анимации загрузки, но теперь с новыми мощными технологиями и современными браузерами (с поддержкой canvas и VML), вы можете сделать анимацию загрузки с помощью CSS3 и jQuery очень просто.

Существующие решения в общей сложности основаны на CSS3 и JQuery, которые могут создать анимацию загрузки, но не все из них могут работать в старых браузерах. Наличие JavaScript VML и canvas поддерживается отличной библиотекой spin.js. JQuery плагин создает спинер с использованием VML или SVG. Он имеет такую же функциональность как spin.js.  Скрипт имеет малый вес, поддерживает  альфа-прозрачность, очень гибко настраивается и зависит от разрешения экрана. Он работает в следующих браузерах: Хром, Safari 3.2 +, Firefox 3.5 +, IE 6,7,8,9, Opera 10.6 +, Mobile Safari (IOS 3.1 +), Android 2.3 +.

Canvas прелоудер плагин является удобным и выглядит лучше, чем типичная анимация загрузки в формате GIF. Спиннер основан на технологии Canvas и так же имеет ширину и высоту. Этот плагин полезен для разработки мобильных приложений и его можно увидеть на Android. Это позволяет проверить поддержку Canvas на аппарате. Для создания круговых прелоудеров можно использовать Heartcode CanvasLoader из библиотеки JavaScript на HTML5. Spin.js поддерживает старые браузеры и имеет интерфейс для настройки прелоадера. Он имеет гибкие настройки, поддержку основных браузеров и не зависит от разрешения. Spin.js использует JavaScript VML в качестве крайней меры для поддержки древних IE. Единственное, – ваш браузер должен поддерживать Canvas. Кроме этого файл имеет очень маленький вес ~ 3k, что дает ему преимущество с гиф анимацией.

Анимация загрузки на Ajax также довольно удобна. Вы можете создать желаемые пиктограммки выберая тип индикатора, фон и цвет переднего плана. Выпадающее меню – еще одно решение в меню навигации с использованием JavaScript. Вы также можете контролировать cookie используя JavaScript. Chimply даст вам возможность сгенерировать красивые анимированные круги. Вы можете получить даже трехмерные круги, горизонтальные, прямоугольные, смайлик, знаки религии и знаки зодиака.

1. Spin.js

spinner спиннер прелоадер

2. CSS3 Loading Animation Loop

trobber анимация загрузки

3. CSS3 Loading Animation

preloader анимация троббер

4. CanvasLoader Creator

spinner preloader анимация загрузки

5. Flickr Style Loading Animation Using JQuery

trobber овал загрузка

6. CSS Loading Animation Circle Style

CSS Loading Animation Circle Style preloader

7. Loading CSS spinners and bars generator for AJAX & JQuery

Loading spinners generator AJAX JQuery css

8. CSS3 loading spinners without images

CSS3 loading trobber without images

9. Bouncy Animated Loading Animation

Animation Loading css trobber spiner

10. Sonic – looping loaders

looping loaders ajax spinner

11. Simple Loading Modal ($)

loading simple preloader

12. PageLoading – jQuery plugin ($)

page loading jquery

13. Image Loader (jQuery Plugin) ($)

image loader jquery

14. Simple Content Loader ($)

ajax loader trobber

15. Preloadify ($)

preloader preloadify

16. Ajax Style Loading Animation in CSS3 (no Images)

ajax style loading animation css

17. Throbber.js

throbber js loader

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*

*