ZorNet.Ru — сайт для вебмастера » HTML и CSS » Предварительная загрузка при помощи CSS

Предварительная загрузка при помощи CSS

Отлично сделана по своему виду предварительная загрузка, которая идет с анимацией, что можно установить под функцию скачивание для сайта. Безусловно в современный высокоскоростной интернет соединение, где-то сделал из пользователей и гостей немного испорченными, в плане загрузки, что этот момент нужно как раз создать красочным по своему стилю. И вот для этого ровным счетом почти не делается, но на многих интернет ресурсов уже можно заметить специальные страницы с присутствием анимации.

Если драть средний временной промежуток, то веб-сайт занимает больше четырех секунд для полноценной, что, как правило, нажимаем на клавишу и просто закрываем все, но не в нашем случай, так как появится красивая анимация, что думаю кто скачивает, вероятно будет интересным наблюдать за действием.

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

Так будет выглядит, как выставите на сайт:

Приступаем к установке:

HTML

Код

<div id="varietaned-mostogaben">
За
гр
у зк
а
<div class="dotter">. . .</div>

Пожалуйста подождите . . .
</div>

CSS

Код

#varietaned-mostogaben{
width:300px;
position:relative;
left:100px;
margin:30px 0}

.kestems-ovembe{
float:left;
font:47px Bicubik;
width:380px;
height:60px}

.dotter span{
-webkit-animation: opacity 1s infinite;
-moz-animation: opacity 1s infinite;
}

.dotter span:nth-child(2){
-webkit-animation-delay:.1s;
-moz-animation-delay:.1s;
animation-delay:.1s;
}

.dotter span:nth-child(3){
-webkit-animation-delay:.3s;
-moz-animation-delay:.3s;
animation-delay:.3s;
}

.word_zed{
color:#0de;
transform:rotate(34deg);
text-shadow:0 0 4px #0de,5px 5px 7px #000;
float: left;
font-size:57px;
animation: lower 10s linear infinite,z-word .25s linear 1;
z-index:100;
margin:15px 0;
}

.kestems-ovembe:hover .word_zed{
text-shadow:0 0 4px,5px 5px 7px #000!important;
color:#ff0!important}

.davagam-esalayers,.brokenoco-versalag{
float: left}

.kestems-ovembe:hover .davagam-esalayers{
color:#fff;
text-shadow:0 0 7px}

.brokenoco-versalag{
color:#0de;
text-shadow:0 0 7px}

.desamilas-1{
animation: desamilas 2s infinite}

.desamilas-2{
animation: desamilas 2s .2s infinite}

.desamilas-3{
animation: desamilas 2s .3s infinite}

.kestems-ovembe:hover .brokenoco-versalag{
color:#f0a;
text-shadow:0 0 7px}

.pleasing{
float:left;
font:12px Bicubik;
white-space:nowrap;
color:#ааа;
margin:25px 50px 0;
animation: myplay 2s infinite;
}

.pleasing span{
-webkit-animation: opacity 1s infinite;
-moz-animation: opacity 1s infinite;
}

.pleasing span:nth-child(2){
-webkit-animation-delay:.1s;
-moz-animation-delay:.1s;
animation-delay:.1s;
}

.pleasing span:nth-child(3){
-webkit-animation-delay:.3s;
-moz-animation-delay:.3s;
animation-delay:.3s;
}

.kestems-ovembe:hover + .loader_commets + .pleasing{
color:#ff0;
text-shadow:0 0 5px}

.loader_comments{
display:inline-block;
height:20px;
width:300px;
border:1px solid;
box-sizing:border-box;
border-color: #bef #5bc #0dd;
animation:move 2s linear infinite;
border-radius:20px;
background:linear-gradient(-45deg, #aef 25%, #09f 25%, #09f 50%, #aef 50%, #aef 75%, #09f 75%, #09f);
background-size:50px 50px;
-webkit-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
box-shadow:inset 0 10px 0 rgba(255, 255, 255, .5),inset 0 0 2px 1px #000}

.kestems-ovembe:hover + .loader_comments{
border-color: #ebf #a49 #f7e;
background:linear-gradient(-45deg, #faf 25%, #f0a 25%, #f0a 50%, #faf 50%, #faf 75%, #f0a 75%, #f0a);
background-size:50px 50px}

@-webkit-keyframes move{
0%{
background-position:0 0}

100%{
background-position:50px 50px}

}

@-moz-keyframes move{
0%{
background-position:0 0}

100%{
background-position:50px 50px}

}

@-ms-keyframes move{
0%{
background-position:0 0}

100%{
background-position:50px 50px}

}

@keyframes move{
0%{
background-position:0 0}

100%{
background-position:50px 50px}

}

@keyframes lower{
0%,12%,18.999%,23%,31.999%,37%,44.999%,46%,49.999%,51%,58.999%,61%,68.999%,71%,85.999%,96%,100%{
color:#2fe;
text-shadow:0 0 4px #0de,5px 5px 7px #000}

19%,22.99%,32%,36.999%,45%,45.999%,50%,50.99%,59%,60.999%,69%,70.999%,86%,95.999%{
color:#1a9;
text-shadow:5px 5px 7px #000}

}

@keyframes desamilas{
0%{
color:#0de;
text-shadow:0 0 4px #0de,5px 5px 7px #000}

100%{
color:#099;
text-shadow:5px 5px 7px #000}

}

@keyframes z-word{
0%{
transform:rotate(0deg);
color:#0de;
text-shadow:0 0 4px #0de,5px 5px 2px #000;
margin: 0}

100%{
color:#099;
text-shadow:5px 5px 7px #000;
}

}

/* Точки */ @-webkit-keyframes opacity{
0%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

100%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}

}

@-moz-keyframes opacity{
0%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

100%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}

}

@keyframes opacity{
0%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

100%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}

}

@keyframes myplay{
0%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

100%{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: .2;
}
}

Если говорить, preloaders, также известные как загрузчики, то что смотрится на мониторе или экране, пока остальная часть содержимого страницы по-прежнему загружается.

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

09 Ноября 2018 Просмотров: 887 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: CbIPoK2513 14 Ноября 2018 05:13¹ 0 Щас кто-нибудь неопытный поставит и будет возмущаться что не работает.. Без JS тут не обойтись, прятать после загрузки страницы под силу только ему)