Подробное описание и демонстрацией работы эффекта загрузки под номером №12 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 12
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner box"></div> <div class="loader-inner box2"></div> <div class="loader-inner box3"></div> <div class="loader-inner box4"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.loader {
position: relative;
margin: 50px auto 0;
width: 105px;
height: 105px;
}
.loader-inner {
border-radius: 2px;
background: #fff;
position: absolute;
}
.box {
width: 100px;
height: 4px;
animation: desno 1s infinite;
}
.box2 {
width: 4px;
height: 100px;
opacity: 0;
animation: desno2 1s infinite;
}
.box3 {
width:100px;
height: 4px;
margin-top: 100px;
opacity: 0;
animation: desno3 1s infinite;
}
.box4 {
width: 4px;
height: 100px;
margin-left: 100px;
margin-top: 0px;
opacity: 0;
animation: desno3 1s infinite;
}
@keyframes desno {
0% {
transform: rotate(0deg);
}
80% {
transform: rotate(95deg);
transform-origin: bottom left;
}
99.99% {
opacity: 1;
}
100% {
transform: rotate(90deg);
transform-origin: bottom left;
opacity: 0;
}
}
@keyframes desno2 {
0% {
transform: rotate(0deg);
opacity: 1;
}
80% {
transform: rotate(95deg);
transform-origin: bottom left;
}
99.99% {
opacity: 1;
}
100% {
transform: rotate(90deg);
transform-origin: bottom left;
opacity: 0;
}
}
@keyframes desno3 {
0% {
transform: rotate(0deg);
opacity: 1;
}
80% {
transform: rotate(95deg);
transform-origin: top right;
}
99.99% {
opacity: 1;
}
100% {
transform: rotate(90deg);
transform-origin: top right;
opacity: 0;
}
}
@keyframes desno4 {
0% {
transform: rotate(0deg);
}
80% {
transform: rotate(95deg);
transform-origin: top right;
}
99.99% {
opacity: 1;
}
100% {
transform: rotate(90deg);
opacity: 0;
animation: desno 0.5s;
}
}