Подробное описание и демонстрацией работы эффекта загрузки под номером №73 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 73
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{
background: #00a9a6;
}
.loader{
width: 200px;
height: 200px;
position: relative;
transform: rotate(45deg);
margin: 50px auto;
}
.loader > div{
width: 50px;
height: 50px;
background: rgba(255,255,255,0);
border: 2px solid #ffe1d8;
position: absolute;
top: 73px;
left: 73px;
}
.loader .loader-inner-1{
animation: loading-3 1s infinite ease-in-out;
}
.loader .loader-inner-2{
animation: loading-1 1s forwards,
loading-4 1s infinite ease-in-out;
}
.loader .loader-inner-3{
animation: loading-2 1s forwards,
loading-5 1s infinite ease-in-out;
}
@-webkit-keyframes loading-1{
100%{
width: 100px;
height:100px;
left: 48px;
top: 48px;
}
}
@keyframes loading-1{
100%{
width: 100px;
height:100px;
left: 48px;
top: 48px;
}
}
@-webkit-keyframes loading-2{
100%{
width: 150px;
height: 150px;
left: 23px;
top: 23px;
}
}
@keyframes loading-2{
100%{
width: 150px;
height: 150px;
left: 23px;
top: 23px;
}
}
@-webkit-keyframes loading-3{
0% { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
50% { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes loading-3{
0% { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
50% { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
}
@-webkit-keyframes loading-4{
0% { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
}
@keyframes loading-4{
0% { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
}
@-webkit-keyframes loading-5{
0% { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes loading-5{
0% { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}