Полезное

20 бесплатных анимированных прелоадеров

Автор Freelance.Today

Никому не нравится долго ждать, пока загрузится страница сайта, слайдер или другая информация. Но если сократить время ожидания сайта не удается (например, он интерактивный, и для корректной работы должны подгрузиться все скрипты), нужно постараться как-то скрасить время ожидания загрузки.

Для этого используют анимированные прелоадеры.

Мы выбрали для вас 20 интересных прелоадеров, выполненных с помощью CSS3 и HTML5 или JQuery. Они способны заметно улучшить пользовательский опыт.

Вы можете использовать анимированные индикаторы загрузки для галерей, слайдеров, блогов и многого другого.

Поехали знакомиться!

 

Single Element CSS Spinners 

Вот простые и  элегантные загрузчики, выполненные при помощи CSS. Могут легко стать частью любого веб-проекта – просто скопируйте и вставьте код.

 
 

CSS Rainbow Loader 

А это – сочный прелоадер в виде радуги, создан на  CSS. Подойдет для ярких, динамичных, молодежных проектов!

 
 

Spinner 

А этот индикатор загрузки хорошо подойдет для сайтов с карточным дизайном.

 
 

Single element Slack loader 

Этот изящный прелоадер достигает волшебного эффекта за счет сочетания HTML и CSS. Выглядит здорово, и может чудесно работать на любом типе веб-сайтов.

 
 

Bar/Ball Loader 

Динамическая анимация – разноцветные блоки, которые приводит в движение небольшой шарик.

 
 

Text Filling 

Это отличный загрузчик, который может быть интегрирован с логотипом, названием сайта или броским лозунгом. Станет сильным элементом брендинга для вашего сайта.

 
 

VSCO – CSS loader 

Этот удивительный CSS-погрузчик подходит для различных проектов и приложений. Простой и элегантный, а добавить на сайт его можно в два клика.

 
 

Reddit Loader 

Только два цвета и простые фигуры. Но какая интересная анимация! Этот прелоадер украсит любой ваш сайт.

 
 

Loader #7 

Этот прелоадер идеально подходит для динамичных проектов со стильным, минималистским дизайном.

 
 

Cube CSS Loader 

Снова классика, снова кубики. Но очень интересная анимация делает этот индикатор загрузки притягивающим взгляд.

 
 

Another Simple CSS load animation 

И эта картинка из разряда «не могу оторвать взгляд». Просто завораживает, и гарантировано скрасит время ожидания загрузки для ваших пользователей.

 
 

Tumblr-style cog loaders  

Если вы ищете индикаторы загрузки, как на Tumblr, обратите внимание на эти! Анимация на основе CSS, с использованием SVG иконок.

 
 

CSS3 Loaders 

А это круговые интерактивные CSS3 прелоадеры. Наведите курсор мыши на отдельные участки и посмотрите на интересный эффект.

 
 

CSS loader 

Простая и элегантная анимация в пастельных тонах. Идеальна для сайтов женской тематики.

 
 

CSS loaders kit 

А в этом комплекте вы можете выбрать анимацию загрузки на свой вкус. Будут это часики или просто белые кружки?

 
 

Simple Loader 

Простой загрузчик с прямоугольными формами, которые вращаются. Легко реализовать на любом сайте.

 
 

Loaders collection by Loaders.css 

А здесь целая коллекция анимированных загрузчиков. Есть из чего выбрать, и все легко интегрируются в любой сайт.

 
 

CSS loader 

Интересный прелоадер с кругами. Они то перестраиваются в треугольник, то в пунктирную линию.

 
 

CSS Loader 

Еще одна коллекция индикаторов, с различной анимацией. Все прелоадеры – в форме круга.

 
 

CSS loading text animation 

Эта анимация может быть наложена на текстовый логотип или любой текст – например, на название компании, или ее слоган.

 
 

Надеемся, что-то из этой коллекции пригодится вам в работе над следующим проектом!

 

Источник: 20 Free Animated Spinners and Loaders 

  • 26642