Никому не нравится долго ждать, пока загрузится страница сайта, слайдер или другая информация. Но если сократить время ожидания сайта не удается (например, он интерактивный, и для корректной работы должны подгрузиться все скрипты), нужно постараться как-то скрасить время ожидания загрузки.
Для этого используют анимированные прелоадеры.
Мы выбрали для вас 20 интересных прелоадеров, выполненных с помощью CSS3 и HTML5 или JQuery. Они способны заметно улучшить пользовательский опыт.
Вы можете использовать анимированные индикаторы загрузки для галерей, слайдеров, блогов и многого другого.
Поехали знакомиться!
Вот простые и элегантные загрузчики, выполненные при помощи CSS. Могут легко стать частью любого веб-проекта – просто скопируйте и вставьте код.
А это – сочный прелоадер в виде радуги, создан на CSS. Подойдет для ярких, динамичных, молодежных проектов!
А этот индикатор загрузки хорошо подойдет для сайтов с карточным дизайном.
Этот изящный прелоадер достигает волшебного эффекта за счет сочетания HTML и CSS. Выглядит здорово, и может чудесно работать на любом типе веб-сайтов.
Динамическая анимация – разноцветные блоки, которые приводит в движение небольшой шарик.
Это отличный загрузчик, который может быть интегрирован с логотипом, названием сайта или броским лозунгом. Станет сильным элементом брендинга для вашего сайта.
Этот удивительный CSS-погрузчик подходит для различных проектов и приложений. Простой и элегантный, а добавить на сайт его можно в два клика.
Только два цвета и простые фигуры. Но какая интересная анимация! Этот прелоадер украсит любой ваш сайт.
Этот прелоадер идеально подходит для динамичных проектов со стильным, минималистским дизайном.
Снова классика, снова кубики. Но очень интересная анимация делает этот индикатор загрузки притягивающим взгляд.
Another Simple CSS load animation
И эта картинка из разряда «не могу оторвать взгляд». Просто завораживает, и гарантировано скрасит время ожидания загрузки для ваших пользователей.
Если вы ищете индикаторы загрузки, как на Tumblr, обратите внимание на эти! Анимация на основе CSS, с использованием SVG иконок.
А это круговые интерактивные CSS3 прелоадеры. Наведите курсор мыши на отдельные участки и посмотрите на интересный эффект.
Простая и элегантная анимация в пастельных тонах. Идеальна для сайтов женской тематики.
А в этом комплекте вы можете выбрать анимацию загрузки на свой вкус. Будут это часики или просто белые кружки?
Простой загрузчик с прямоугольными формами, которые вращаются. Легко реализовать на любом сайте.
Loaders collection by Loaders.css
А здесь целая коллекция анимированных загрузчиков. Есть из чего выбрать, и все легко интегрируются в любой сайт.
Интересный прелоадер с кругами. Они то перестраиваются в треугольник, то в пунктирную линию.
Еще одна коллекция индикаторов, с различной анимацией. Все прелоадеры – в форме круга.
Эта анимация может быть наложена на текстовый логотип или любой текст – например, на название компании, или ее слоган.
Надеемся, что-то из этой коллекции пригодится вам в работе над следующим проектом!
Источник: 20 Free Animated Spinners and Loaders
0 комментариев