ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прелоадер для сайта на 3 варианта HTML + CSS

Прелоадер для сайта на 3 варианта HTML + CSS

Если говорить про прелоадер, это оригинальная анимация, который видит пользователь на сайте, во время когда происходит загрузка страницы. Это сделано специально, так как под анимацией идет оригинальный рисунок, что будет просто вас отвлекать от реальной загрузки. И здесь вам предоставлено 3 варианта, которые отличаются по своим характеристикам друг от друга. Также у каждого прописаны свои стили, где заданная скорость и выставлена палитра цвета.

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

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

Также в материале представлен видео-урок, о том как создать два типа прелоадера:

1. Первый отвечает за анимацию, которая происходит до полной загрузки страницы;
2. Второй метод будет отображать процент загруженности.

Первый вариант:

HTML

Код

CSS

Код

body{
background:#020b21}

#vesamiksan-mugalod{
position: absolute;
width: 498px;
height: 125px;
left: 50%;
top: 38%;
margin-left: -247px;
}

#vesamiksan-mugalod:before{
content:'Loading';
display:block;
font-size:20px;
position:absolute;
text-transform:uppercase;
font-family:'Josefin Slab',serif;
color:#90efc0;
text-align:center;
width:100%;
text-shadow:0 0 50px #18ca73}

#vesamiksan-mugalod li{
position: absolute;
width: 9px;
height: 58px;
opacity: 0;
color: #0c7b46;
text-transform: uppercase;
text-shadow: 0 2px 3px rgba(8, 8, 8, 0.93);
font-size: 0;
font-family: 'Josefin Slab',serif;
animation: vesamiksan-mugalod 2300ms linear infinite normal;
-o-animation: vesamiksan-mugalod 2300ms linear infinite normal;
-moz-animation: vesamiksan-mugalod 2300ms linear infinite normal;
-webkit-animation: vesamiksan-mugalod 2300ms linear infinite normal;
}

#vesamiksan-mugalod li:after{
content:'»';
display:block;
font-size:90px;
text-shadow:0 0 40px #21d07b}

#vesamiksan-mugalod li:nth-child(2){
color:#1aa461;
animation-delay:.2s;
-o-animation-delay:.2s;
-moz-animation-delay:.2s;
-webkit-animation-delay:.2s}

#vesamiksan-mugalod li:nth-child(3){
color:#20c776;
animation-delay:.4s;
-o-animation-delay:.4s;
-moz-animation-delay:.4s;
-webkit-animation-delay:.4s}

#vesamiksan-mugalod li:nth-child(4){
color:#31de8a;
animation-delay:.6s;
-o-animation-delay:.6s;
-moz-animation-delay:.6s;
-webkit-animation-delay:.6s}

#vesamiksan-mugalod li:nth-child(5){
color:#54e49e;
animation-delay:.8s;
-o-animation-delay:.8s;
-moz-animation-delay:.8s;
-webkit-animation-delay:.8s}

#vesamiksan-mugalod li:nth-child(6){
color:#85ecba;
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s}

#vesamiksan-mugalod li:nth-child(7){
color:#b1f3d3;
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s}

#vesamiksan-mugalod li:nth-child(8){
color:#effcf6;
animation-delay:1.4s;
-o-animation-delay:1.4s;
-moz-animation-delay:1.4s;
-webkit-animation-delay:1.4s}

#vesamiksan-mugalod li:nth-child(9){
color:#f3fdf8;
animation-delay:1.6s;
-o-animation-delay:1.6s;
-moz-animation-delay:1.6s;
-webkit-animation-delay:1.6s}

#vesamiksan-mugalod li:nth-child(10){
color:#fff;
animation-delay:1.8s;
-o-animation-delay:1.8s;
-moz-animation-delay:1.8s;
-webkit-animation-delay:1.8s}

@-webkit-keyframes vesamiksan-mugalod{
0%{
-webkit-transform:scale(0.2) perspective(400px) rotateY(-50deg);
left:0;
opacity:0;
-webkit-filter:blur(8px)}

35%{
left:41%;
-webkit-transform:scale(1.2) perspective(400px) rotateY(0deg);
opacity:1;
-webkit-filter:blur(0px)}

65%{
left:59%;
-webkit-transform:scale(1.2) perspective(400px) rotateY(0deg);
opacity:1;
-webkit-filter:blur(0px)}

100%{
left:100%;
opacity:0;
-webkit-transform:scale(0.2) perspective(400px) rotateY(50deg);
-webkit-filter:blur(8px)}

}

@-moz-keyframes vesamiksan-mugalod{
0%{
-moz-transform:scale(0.2) perspective(400px) rotateY(-50deg);
left:0;
opacity:0;
-moz-filter:blur(8px)}

35%{
left:41%;
-moz-transform:scale(1.2) perspective(400px) rotateY(0deg);
opacity:1;
-moz-filter:blur(0px)}

65%{
left:59%;
-moz-transform:scale(1.2) perspective(400px) rotateY(0deg);
opacity:1;
-moz-filter:blur(0px)}

100%{
left:100%;
opacity:0;
-moz-transform:scale(0.2) perspective(400px) rotateY(50deg);
-moz-filter:blur(8px)}

}

Появление стрелок, которые двигаются в правую сторону и красиво исчезают.

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

Второй вариант:

Создание прелоадера (preloader) для сайта

HTML

Код

<div id="pansion" style="visibility: visible;">
  <div id="donbusines">LOADING</div>
  <div id="vasobnslation" class="tudesaasob cube">
  <div class="dsabasob-mevogad top"></div>
  <div class="dsabasob-mevogad bottom"></div>
  <div class="dsabasob-mevogad front"></div>
  <div class="dsabasob-mevogad back"></div>
  <div class="dsabasob-mevogad left"></div>
  <div class="dsabasob-mevogad right"></div>
  </div>
</div>

CSS

Код

body{background:linear-gradient(to bottom,#cee7d4 0%,#f5f4c9 100%);background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;perspective:1000px}
.cube{position:relative;margin:calc(45vh - 150px) auto;width:150px;height:150px;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(45deg);transition:all .75s ease}
.dsabasob-mevogad{width:150px;height:150px;position:absolute;box-sizing:border-box}
.dsabasob-mevogad.top{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,75px)}
.dsabasob-mevogad.bottom{transform:rotateY(180deg) rotateX(90deg) translate3d(0,0,-75px)}
.dsabasob-mevogad.front{transform:translate3d(0,0,75px)}
.dsabasob-mevogad.back{transform:translate3d(0,0,-75px)}
.dsabasob-mevogad.left{transform:rotateY(90deg) translate3d(0,0,-75px)}
.dsabasob-mevogad.right{transform:rotateY(90deg) translate3d(0,0,75px)}
.tudesaasob .back{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zarybgsa.png);background-size:100% 100%}
.tudesaasob .front{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zarybgsa.png);background-size:100% 100%}
.tudesaasob .left{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zarybgsa.png);background-size:100% 100%}
.tudesaasob .right{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zarybgsa.png);background-size:100% 100%}
.tudesaasob .top{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/48-3.png);background-size:100% 100%}
.tudesaasob .bottom{background:url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/pac-5.jpg);background-size:100% 100%;text-align:center}
#vasobnslation{-webkit-animation-name:spin;-webkit-animation-duration:5s;animation-name:spin;animation-duration:5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}
#pansion{position:absolute;top:0;left:0;width:100vw;height:100vh}
#donbusines{font-size:75px;font-family:Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black","sans serif";position:relative;top:calc(45vh - 150px);text-align:center;z-index:1;transition:all .75s ease;-webkit-animation-name:spin;-webkit-animation-duration:5s;animation-name:spin;animation-duration:5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}
@keyframes spin {
from{transform:rotateX(-3deg) rotateY(0deg)}
to{transform:rotateX(-3deg) rotateY(360deg)}
}

Это чисто игровая загрузка, тематического направление.

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

Третий вариант:

HTML

Код

<div id="koracting-dsacustom">
  <div class="medaplakos">
  <div class="cadempaignus"></div>
  <div class="cadempaignus"></div>
  <div class="cadempaignus"></div>
  <div class="cadempaignus"></div>
  <div class="cadempaignus"></div>
  <div class="cadempaignus"></div>
  <div class="subcadempaignus"></div>
  <div class="subcadempaignus"></div>
  <div class="subcadempaignus"></div>
  <div class="subcadempaignus"></div>
  <div class="subcadempaignus"></div>
  <div class="delivegoal-goriented"><div class="gualsenuica-kaxperien"></div></div>
  <div class="generateds"></div>
  <div class="goalveomidsan">Loading</div>
  </div>
</div>

CSS

Код

#koracting-dsacustom{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:#000;
z-index:15;
overflow:hidden}

.medaplakos{
width:150px;
height:150px;
border:1px #fff solid;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -75px;
border-radius:50%}

.medaplakos .goalveomidsan{
font-size:10px;
position:absolute;
width:100%;
text-align:center;
cadempaignus-height:14px;
font-family:'Century Gothic',sans-serif;
font-style:italic;
left:0;
top:50%;
margin-top:20px;
color:#fff;
font-weight:700;
text-transform:uppercase}

.delivegoal-goriented{
width:138px;
height:138px;
left:5px;
top:5px;
border:1px #fff solid;
border-radius:50%;
position:absolute;
border-right-color:transparent;
-webkit-animation:spin 3s cadempaignusar infinite;
animation:spin 3s cadempaignusar infinite}

.gualsenuica-kaxperien{
width:126px;
height:126px;
left:5px;
top:5px;
border:1px transparent solid;
border-radius:50%;
position:absolute;
border-right-color:#e81512;
-webkit-animation:spin 5s cadempaignusar infinite;
animation:spin 5s cadempaignusar infinite}

.medaplakos .cadempaignus{
width:10px;
height:2px;
background:#fff;
position:absolute}

.medaplakos .cadempaignus:nth-child(1){
left:16px;
top:50%;
margin-top:-1px}

.medaplakos .cadempaignus:nth-child(2){
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
left:33px;
top:33px}

.medaplakos .cadempaignus:nth-child(3){
top:16px;
left:50%;
width:2px;
height:10px}

.medaplakos .cadempaignus:nth-child(4){
transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
right:33px;
top:33px}

.medaplakos .cadempaignus:nth-child(5){
right:16px;
top:50%;
margin-top:-1px}

.medaplakos .cadempaignus:nth-child(6){
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
right:33px;
bottom:33px;
background:#e81512}

.medaplakos .subcadempaignus{
position:absolute;
width:3px;
height:2px;
background:#fff}

.medaplakos .subcadempaignus:nth-child(7){
transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
-webkit-transform:rotate(22.5deg);
-ms-transform:rotate(22.5deg);
left:21px;
top:50px}

.medaplakos .subcadempaignus:nth-child(8){
transform:rotate(67.5deg);
-moz-transform:rotate(67.5deg);
-webkit-transform:rotate(67.5deg);
-ms-transform:rotate(67.5deg);
left:50px;
top:21px}

.medaplakos .subcadempaignus:nth-child(9){
transform:rotate(112.5deg);
-moz-transform:rotate(112.5deg);
-webkit-transform:rotate(112.5deg);
-ms-transform:rotate(112.5deg);
right:50px;
top:21px}

.medaplakos .subcadempaignus:nth-child(10){
transform:rotate(157.5deg);
-moz-transform:rotate(157.5deg);
-webkit-transform:rotate(157.5deg);
-ms-transform:rotate(157.5deg);
right:21px;
top:50px}

.medaplakos .subcadempaignus:nth-child(11){
transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
-webkit-transform:rotate(22.5deg);
-ms-transform:rotate(22.5deg);
right:20px;
bottom:49px;
background:#e81512}

.medaplakos .generateds{
width:14px;
height:14px;
border-radius:50%;
border:1px #fff solid;
position:absolute;
left:50%;
top:50%;
margin:-8px 0 0 -8px;
z-index:1;
-webkit-animation:pegIt 3s infinite ease-in-out;
animation:pegIt 3s infinite ease-in-out}

.medaplakos .generateds:before{
content:'';
width:0;
height:0;
border-style:solid;
border-width:3.5px 50px 3.5px 0;
border-color:transparent #e81512 transparent transparent;
position:absolute;
right:50%;
top:50%;
margin:-3.5px 0 0;
border-radius:0 50% 50% 0}

@keyframes pegIt{
0%{
transform:rotate(0deg)}

16%{
transform:rotate(75deg)}

25%{
transform:rotate(55deg)}

30%{
transform:rotate(90deg)}

36%{
transform:rotate(170deg)}

42%{
transform:rotate(150deg)}

50%{
transform:rotate(227deg)}

100%{
transform:rotate(0deg)}

}

@-webkit-keyframes pegIt{
0%{
-webkit-transform:rotate(0deg)}

16%{
-webkit-transform:rotate(75deg)}

25%{
-webkit-transform:rotate(55deg)}

30%{
-webkit-transform:rotate(90deg)}

36%{
-webkit-transform:rotate(170deg)}

42%{
-webkit-transform:rotate(150deg)}

50%{
-webkit-transform:rotate(227deg)}

100%{
-webkit-transform:rotate(0deg)}

}

@-webkit-keyframes spin{
0%{
-webkit-transform:rotate(0deg)}

100%{
-webkit-transform:rotate(360deg)}

}

@keyframes spin{
0%{
transform:rotate(0deg)}

100%{
transform:rotate(360deg)}

}

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

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

09 Января 2019 Просмотров: 1491 Комментариев: (0)

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

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

Kosten

Комментарии: 0