+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Анимация загрузки с помощью css3

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

Демонстрация

Сначала наш блок <div></div>
<div class="loadcss"></div>
Всё остальное - это код css. Оформляем
/* анимация */
/* bzzz - это имя нашей анимации, задать можете любое */
@keyframes bzzz{
/* крутим наш блок на 360 градусов */
100%{transform:rotate(360deg);}
}
@-o-keyframes bzzz{
100%{-o-transform:rotate(360deg);}
}
@-ms-keyframes bzzz{
100%{-ms-transform:rotate(360deg);}
}
@-moz-keyframes bzzz{
100%{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes bzzz{
100%{-ms-transform:rotate(360deg);}
}
/* сам блок */
.loadcss{
width:50px; height:50px; /*ширина и высота блока*/
/* цвета для сторон блока */
border:5px solid #000;
border-right-color:#777;
border-bottom-color:#555;
border-left-color:#333;
border-radius:100%;
/*
* наша анимация
* 650ms - скорость анимации
* infinite - указывает браузеру повторять анимацию бесконечно
* linear - анимация происходит равномерно на протяжении всего времени, без колебаний в скорости
*/
animation: bzzz 650ms infinite linear;
-o-animation: bzzz 650ms infinite linear;
-ms-animation: bzzz 650ms infinite linear;
-moz-animation: bzzz 650ms infinite linear;
-webkit-animation: bzzz 650ms infinite linear;}

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 1577