Аякс (Ajax) лоадер на CSS 3 в стиле Facebook
Аякс
(Ajax) лоадер на CSS 3 в стиле Facebook. Теперь можно не использовать
картинки (хотя работает лоадер только в webkit браузерах :/) HTML <div id='facebook' > <div id='block_1' class='facebook_block'></div> <div id='block_2' class='facebook_block'></div> <div id='block_3' class='facebook_block'></div> </div> #facebook{
margin-top:30px;
float:left;
}
.facebook_block{
background-color:#9FC0FF;
border:2px solid #3B5998;
float:left;
height:30px;
margin-left:5px;
width:8px;
opacity:0.1;
-webkit-transform:scale(0.7);
-webkit-animation-name: facebook;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#block_1{
-webkit-animation-delay: .3s;
}
#block_2{
-webkit-animation-delay: .4s;
}
#block_3{
-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
|
|
|
| Категория: Плагины jQuery | Добавил: dEnny (01.03.2011)
|
| Просмотров: 508
| Теги:
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]
