Креативная иконка загрузки (loader) на CSS3 + 3 примера! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКреативная иконка загрузки (loader) на CSS3 + 3 примера!
Дата: 07.07.2013 в 15:27 | Просмотров: 4890

Креативная иконка загрузки (loader) на CSS3 + 3 примера!

иконка загрузки, css3 анимация
Скачатьбесплатно с сервера
Демодемонстрация

Привет народ, на этот раз наша цель – иконка загрузки. Мы собираемся увидеть и создать три цикла анимации на CSS3, которые могут быть использованы во многих областях, таких как например loader для изображений с JQuery, или при ajax загрузке.

Обратите внимание: безупречная работа этих иконок загрузки гарантируется только в современных браузерах, которые поддерживают соответствующие свойства CSS3.

Как видите, мы имеем 3 css анимации. Давайте рассмотрим каждый в отдельности.

Другие современные эффекты с более чем 30 кнопками, смотрите здесь.

→ Первый пример CSS3 анимации

jquery loader, иконка загрузки

В этом первом примере, необходимо создать только два DIV и благодаря свойству border-radius, они примут форму круга.

В стилях тоже нет ничего сложного: внешний вид Вы можете видеть ниже, а что касается анимации, то нужно просто использовать свойство transform:rotate.

→ Второй пример CSS3 анимации

иконка загрузки, css3 анимация

Второй пример в html почти ничем не отличается от первого, только в названии класса. Основные отличия Вы можете найти в css стилях.

В этом примере мы будем делать уклон на вращение, и добавим такую анимацию, которая позволит нам иметь импульсный эффект.

Этот эффект будет работать только в первом круге.

→ Третий пример CSS3 анимации

иконка загрузки, css3 анимация

В этом последнем примере мы имеем эффект css3 анимации благодаря свойству transform:scale.

Код html длиннее, чем примеры выше, но это может варьироваться в зависимости от количества блоков, которые Вы хотите вставить.

Здесь стили гораздо легче отрегулировать, так как мы собираемся применить эффект, с помощью свойства animation:delay, для каждого блока.

Заключение

Я надеюсь, что в этом уроке Вы узнали, как создать простой цикл css3 анимации, используя только CSS3 свойств. Теперь Вы имеете 3 иконки загрузки, которые можете использовать в своих проектах. Желаю успехов! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
Перевел: Владислав Бондаренко


Добавить комментарий