Подробное описание и демонстрацией работы эффекта загрузки под номером №177 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 177
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #0a2e36; }
.loader{
width: 195px;
height: 195px;
margin: 0 auto 30px;
position: relative;
perspective: 195px;
transform-type: preserve-3d;
}
.loader .loader-inner{
width: 117px;
height: 117px;
border-radius: 97px;
border: 39px outset #dd0223;
margin: -58px 0 0 -58px;
position: absolute;
top: 50%;
left: 50%;
transform-type: preserve-3d;
transform-origin: 50% 50%;
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
animation: loading-1 1150ms cubic-bezier(.49,.06,.43,.85) infinite;
}
.loader .loader-inner:nth-child(2){
width: 136px;
height: 136px;
border-width: 29px;
border-color: #ffba08;
margin: -68px 0 0 -68px;
box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
animation-name: loading-2;
animation-delay: 86.25ms;
}
.loader .loader-inner:nth-child(3){
width: 156px;
height: 156px;
border-width: 19px;
border-color: #27fb6b;
margin: -78px 0 0 -78px;
box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
animation-name: loading-3;
animation-delay: 172.5ms;
}
@keyframes loading-1{
0%{
border-color: #dd0223;
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
50%{
border-color: #dd0223;
transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
}
100%{
border-color: #dd0223;
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
}
@keyframes loading-2{
0%{
border-color: #ffba08;
box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
50%{
border-color: #ffba08;
box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.8);
transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
}
100%{
border-color: #ffba08;
box-shadow: inset 0 0 15px 0 rgba(255,255,255,0.2);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
}
@keyframes loading-3{
0%{
border-color: #27fb6b;
box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.1);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
50%{
border-color: #27fb6b;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
}
100%{
border-color: #27fb6b;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-24px);
}
}