Подробное описание и демонстрацией работы эффекта загрузки под номером №143 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 143
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box"> <div class="box-inner-1"> <div class="box-1"></div> <div class="box-2"></div> </div> <div class="box-inner-2"> <div class="box-3"></div> </div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #ffc089; }
.loader{
width: 278px;
height: 108px;
margin: 70px auto;
overflow: hidden;
position: relative;
}
.loader .box{
width: 50%;
height: 50%;
background: transparent;
position: absolute;
bottom: 0;
right: 0;
transform-origin: 15% 60%;
animation: loading-2 2.1s ease-in-out infinite;
}
.loader .box-inner-1{
width: 100%;
height: 100%;
position: absolute;
transform-origin: 15% 60%;
animation: loading-3 2.1s ease-in-out infinite;
}
.loader .box-1{
width: 70px;
height: 17px;
background: #333;
border-radius: 0 0 27px 27px;
position: absolute;
bottom: 20%;
right: 30%;
transform-origin: -15% 0;
}
.loader .box-2{
width: 35%;
height: 20%;
background: transparent;
border-radius: 50%;
border-top: 7px solid #333;
border-left: 7px solid transparent;
position: absolute;
bottom: 55%;
right: 80%;
transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
}
.loader .box-inner-2{
width: 100%;
height: 100%;
position: absolute;
top: 24%;
transform: rotateX(85deg);
animation: loading-1 2.1s ease-in-out infinite;
}
.loader .box-3{
width: 35%;
height: 40%;
background: #333;
border-radius: 50%;
box-shadow: 0 0 3px 0 #333;
position: absolute;
bottom: 46%;
right: 40%;
transform-origin: -32% 0;
animation: loading-4 2.1s ease-in-out infinite;
}
@keyframes loading-1{
0%{
top: 24%;
transform: rotateX(85deg);
}
25%{
top: 10%;
transform: rotateX(0deg);
}
50%{
top: 30%;
transform: rotateX(85deg);
}
75%{
transform: rotateX(0deg);
}
100%{
transform: rotateX(85deg);
}
}
@keyframes loading-2{
0%{
transform: rotate(0deg);
}
5%{
transform: rotate(-27deg);
}
30%,50%{
transform: rotate(0deg);
}
55%{
transform: rotate(27deg);
}
83.3%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes loading-3{
0%{
transform: rotateY(0deg);
}
50%{
transform: rotateY(180deg);
}
100%{
transform: rotateY(0deg);
}
}
@keyframes loading-4{
0%{
bottom: 26%;
transform: rotate(0deg);
}
10%{
bottom: 40%;
}
50%{
bottom: 26%;
transform: rotate(-190deg);
}
80%{
bottom: 40%;
}
100%{
bottom: 50%;
transform: rotate(0deg);
}
}