Анимация загрузки, как на Facebook

Доброго времени суток! Сегодня мы рассмотрим, каким образом с помощью CSS3 можно создать анимацию загрузки, как на Facebook.

Заметка! Для работы примера, запускайте его на локальном сервере.

Для этого мы воспользуемся специальными ключевыми кадрами, которые доступны в CSS3. Также мы задействуем скрипт prefix free, который будет подставлять префиксы к CSS селекторам в зависимости от использующегося браузера.

Внимание. Данная анимация будет работать только в браузерах, поддерживающих работу ключевых кадров CSS3. Моя проверка показала, что последние версии Firefox, Chrome и Safari отлично справляются с отображением данного примера.

Код данного примера прост до безобразия, но я всё же добавил поясняющие комментарии.

<!-- Facebook Loader -->
<div class="loader">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>
/* FACEBOOK LOADER */
.loader { width:32px; height:32px; }

/* основные настройки отображения */
.bar {
    background-color:#99aaca; border:1px solid #96a6c9; float:left;
    margin-right:4px; margin-top:6px; width:6px; height:18px;

    /* Set the animation properties */
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: loadingbar;
}

/* задержка анимации для второго и третьего элемента */
.loader .bar:nth-child(2) { animation-delay: 0.1s; }
.loader .bar:nth-child(3) { animation-delay: 0.2s; }

/* анимация */
@keyframes loadingbar {
     0% { }
    10% { margin-top:5px; height:22px; border-color:#d1d8e6; background-color:#bac5db; }
    20% { margin-top:0px; height:32px; border-color:#d1d7e2; background-color:#c6ccda; }
    30% { margin-top:1px; height:30px; border-color:#d1d8e6; background-color:#bac5db; }
    40% { margin-top:3px; height:26px; }
    50% { margin-top:5px; height:22px; }
    60% { margin-top:6px; height:18px; }
    70% { }
    /* разрыв между кадрами вызовет задержку */
    100% { }
}

Вот и всё, что нам нужно! Прошу обратить внимание, что при использовании CSS3 выражений, prefix free подставит к ним префиксы в зависимости от браузера: -webkit-, -moz- и так далее.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/6kU-DETS8LU/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Анимация загрузки, как на Facebook | | 2013-03-29 00:50:13 | | Статьи Web-мастеру | | Доброго времени суток! Сегодня мы рассмотрим, каким образом с помощью CSS3 можно создать анимацию загрузки, как на Facebook.Заметка! Для работы примера, запускайте его на локальном сервере.Для этого | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: