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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<i class="fa fa-rocket"></i>
</div>
</div>
</div>
</div>

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

.loader{
width: 100px;
height: 50px;
position: relative;
color: #d9dc8e;
margin: 20px auto;
}
.loader:before,
.loader:after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #d9dc8e;
position: absolute;
-webkit-animation: loading2 1s linear 1s infinite backwards;
animation: loading2 1s linear 1s infinite backwards;
}
.loader:after{
top: 6px;
}
.fa-rocket{
position: absolute;
font-size: 50px;
top: 5px;
left: 14px;
-webkit-animation: loading1 1s linear infinite alternate backwards;
animation: loading1 1s linear infinite alternate backwards;
}
@-webkit-keyframes loading1{
0% {
-webkit-transform: translate3d(0, 3px, 0) rotate(45deg);
transform: translate3d(0, 3px, 0) rotate(45deg);
}
100% {
-webkit-transform: translate3d(6px, 6px, 0) rotate(45deg);
transform: translate3d(6px, 6px, 0) rotate(45deg);
}
}
@keyframes loading1{
0% {
-webkit-transform: translate3d(0, 3px, 0) rotate(45deg);
transform: translate3d(0, 3px, 0) rotate(45deg);
}
100% {
-webkit-transform: translate3d(6px, 6px, 0) rotate(45deg);
transform: translate3d(6px, 6px, 0) rotate(45deg);
}
}
@-webkit-keyframes loading2{
0%,
100% {
-webkit-transform: translate3d(12px, 30px, 0);
transform: translate3d(12px, 30px, 0);
opacity: 0;
}
5% {
opacity: 1;
}
70% {
-webkit-transform: translate3d(-60px, 30px, 0) rotate(45deg);
transform: translate3d(-60px, 30px, 0) rotate(45deg);
opacity: 0;
}
}
@keyframes loading2{
0%,
100% {
-webkit-transform: translate3d(12px, 30px, 0);
transform: translate3d(12px, 30px, 0);
opacity: 0;
}
5% {
opacity: 1;
}
70% {
-webkit-transform: translate3d(-60px, 30px, 0) rotate(45deg);
transform: translate3d(-60px, 30px, 0) rotate(45deg);
opacity: 0;
}
}

Теги: