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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-loader">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>

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

.main-loader{
width: 54px;
height: 25px;
position: relative;
margin: 40px auto;
}
.loader{
width: 40px;
height: 40px;
position: relative;
left: 50%;
}
.loader span{
width: 20px;
height: 20px;
display: block;
background: #db3340;
position: absolute;
bottom: 0px;
}
.loader span:nth-child(1){
-webkit-animation: loader-1 1.5s infinite ease-in-out;
-moz-animation: loader-1 1.5s infinite ease-in-out;
-ms-animation: loader-1 1.5s infinite ease-in-out;
animation: loader-1 1.5s infinite ease-in-out;
}
.loader span:nth-child(2){
left:20px;
-webkit-animation: loader-2 1.5s infinite ease-in-out;
-moz-animation: loader-2 1.5s infinite ease-in-out;
-ms-animation: loader-2 1.5s infinite ease-in-out;
animation: loader-2 1.5s infinite ease-in-out;
}
.loader span:nth-child(3){
top:0px;
-webkit-animation: loader-3 1.5s infinite ease-in-out;
-moz-animation: loader-3 1.5s infinite ease-in-out;
-ms-animation: loader-3 1.5s infinite ease-in-out;
animation: loader-3 1.5s infinite ease-in-out;
}
.loader span:nth-child(4){
top:0px;
left:20px;
-webkit-animation: loader-4 1.5s infinite ease-in-out;
-moz-animation: loader-4 1.5s infinite ease-in-out;
-ms-animation: loader-4 1.5s infinite ease-in-out;
animation: loader-4 1.5s infinite ease-in-out;
}
/*first*/
@-webkit-keyframes loader-1 {
0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#d0c91f;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes loader-1 {
0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#d0c91f;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes loader-1 {
0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#d0c91f;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes loader-1 {
0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#d0c91f;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
/*second*/
@-webkit-keyframes loader-2 {
0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#5d3347;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes loader-2 {
0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#5d3347;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes loader-2 {
0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#5d3347;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes loader-2 {
0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#5d3347;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
/*third*/
@-webkit-keyframes loader-3 {
0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#6997c5;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes loader-3 {
0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#6997c5;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes loader-3 {
0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#6997c5;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes loader-3 {
0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#6997c5;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
/*fourth*/
@-webkit-keyframes loader-4 {
0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#588c73;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes loader-4 {
0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#588c73;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes loader-4 {
0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#588c73;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes loader-4 {
0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#588c73;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

Теги: