css | загрузчик страницы

Декоративный загрузчик страницы (задержка на 1.5 сек)

/*IMAGES*/
body:before{
background-image: url(//raw.githubusercontent.com/kaurkaur/Shikimori/master/img/loader/loader1.gif)
}
/*IMAGES:END*/
/*LOADER*/
body:before{
content: «Загрузка…»;
background-size: 400px;
background-repeat:no-repeat;
background-position-x: center;
background-position-y: 42vh;
background-color: #fff;
color: #666;
display: block;
text-align: center;
font-size: 24px;
font-weight: 700;
overflow: hidden;
padding-top: 200px;
position: fixed;
top:0;
left:0;
height:100%;
width: 0%;
z-index: 10000;
animation: 1.5s ease-out 0s 1 slide;
-webkit-animation: 1.5s ease-out 0s 1 slide;
-o-animation: 1.5s ease-out 0s 1 slide
}@keyframes slide {
0% {width:100%;opacity: 0}
5% {width:100%;opacity: 1}
80% {width:100%;opacity: 1}
95% {width:100%}
100% {opacity: 0}
}
/*LOADER:END*/

Автор: kaur

Реклама

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: