Preloader для сайта — стиль 172

Подробное описание и демонстрацией работы эффекта загрузки под номером №172 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки тсраницы

<div class="demo">
<div class="loader">
<div class="loader-inner"></div>
<div class="box-1"></div>
</div>
</div>

css разметка для реализации эффекта загрузки тсраницы

.demo{ background: #424874; }
.loader{
width: 200px;
height: 200px;
margin: 90px auto 50px;
position: relative;
}
.loader .loader-inner{
width: 50px;
height: 50px;
background: #f0c808;
margin: -25px 0 0 -25px;
position: absolute;
top: 50%;
left: 50%;
animation: loading-1 2.6s ease 0s infinite forwards;
}
.loader .loader-inner:after{
content: "";
display: inline-block;
width: 50px;
height: 50px;
background: #f0c808;
position: absolute;
top: 0;
left: -50px;
transform-origin: top right;
transform: translateX(0px) translateY(0px) rotate(0deg);
animation: loading-2 2.6s ease 0s infinite forwards;
}
.loader .box-1{
width: 100px;
height: 10px;
border-radius: 50%;
background: rgba(0,0,0,0.3);
position: absolute;
top: 50%;
left: 50%;
margin: 50px 0 0 -75px;
animation: loading-3 2.6s ease 0s infinite forwards, loading-4 5s ease-in-out 0s infinite forwards;
}
@keyframes loading-1{
0%{
width: 50px;
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
transform: translateX(0px) translateY(0px) rotate(0deg);
}
20%{
width: 50px;
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
transform: translateX(0px) translateY(0px) rotate(0deg);
}
40%{
width: 150px;
-webkit-transform: translateX(-50px) translateY(0px) rotate(0deg);
transform: translateX(-50px) translateY(0px) rotate(0deg);
}
60%{
width: 150px;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateX(-150px) translateY(0px) rotate(90deg);
transform: translateX(-150px) translateY(0px) rotate(90deg);
}
80%{
width: 50px;
-webkit-transform: translateX(-25px) translateY(0px) rotate(90deg);
transform: translateX(-25px) translateY(0px) rotate(90deg);
}
100%{
width: 50px;
-webkit-transform: translateX(-50px) translateY(0px) rotate(90deg);
transform: translateX(-50px) translateY(0px) rotate(90deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
transform: translateX(0px) translateY(0px) rotate(0deg);
}
20%{
-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);
transform: translateX(0px) translateY(0px) rotate(180deg);
}
40%{
-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);
transform: translateX(0px) translateY(0px) rotate(180deg);
}
60%{
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
transform: translateX(0px) translateY(0px) rotate(0deg);
}
80%{
-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
transform: translateX(0px) translateY(0px) rotate(0deg);
}
100%{
-webkit-transform: translateX(0px) translateY(0px) rotate(180deg);
transform: translateX(0px) translateY(0px) rotate(180deg);
}
}
@keyframes loading-3{
0%{
width: 150px;
-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);
transform: translateX(-25px) translateY(0px) rotate(0deg);
}
20%{
width: 75px;
-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);
transform: translateX(37.5px) translateY(0px) rotate(0deg);
}
40%{
width: 200px;
-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);
transform: translateX(-25px) translateY(0px) rotate(0deg);
}
60%{
width: 75px;
-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);
transform: translateX(37.5px) translateY(0px) rotate(0deg);
}
80%{
width: 75px;
-webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg);
transform: translateX(37.5px) translateY(0px) rotate(0deg);
}
100%{
width: 150px;
-webkit-transform: translateX(-25px) translateY(0px) rotate(0deg);
transform: translateX(-25px) translateY(0px) rotate(0deg);
}
}
@keyframes loading-4{
0%{ top: 50%; }
50%{ top: 51%; }
100%{ top: 50%; }
}

Теги: