Подробное описание и демонстрацией работы эффекта загрузки под номером №182 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 182
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: radial-gradient(circle,#333, #000) no-repeat; }
.loader{
width: 90px;
height: 90px;
margin: 30px auto 100px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotate(45deg);
position: relative;
}
.loader .loader-inner{
width: 30px;
height: 30px;
background: #ff6352;
box-shadow: 112px 112px 20px #000;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
animation: loading-1 2s ease-in-out infinite both;
}
.loader .loader-inner:nth-child(1){ animation-delay: -1s; }
.loader .loader-inner:nth-child(2){ animation-delay: -2s; }
.loader .loader-inner:before,
.loader .loader-inner:after{
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
}
.loader .loader-inner:before{
background: #d74535;
top: 100%;
left: 0;
transform-origin: center top;
transform: rotateX(-90deg);
}
.loader .loader-inner:after{
background: #ae372a;
top: 0;
left: 100%;
transform-origin: center left;
transform: rotateY(90deg);
}
@keyframes loading-1{
0%,100%{
transform: none;
}
12.5%{
transform: translate(30px, 0);
}
25%{
transform: translate(60px, 0);
}
37.5%{
transform: translate(60px, 30px);
}
50%{
transform: translate(60px, 60px);
}
62.5%{
transform: translate(30px, 60px);
}
75%{
transform: translate(0, 60px);
}
87.5%{
transform: translate(0, 30px);
}
}