Подробное описание и демонстрацией работы эффекта загрузки под номером №153 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 153
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner box-1"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-3"></div> <div class="loader-inner box-4"></div> <div class="loader-inner box-5"></div> <div class="loader-inner box-6"></div> <div class="loader-inner box-7"></div> <div class="loader-inner box-8"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 200px;
height: 200px;
margin: 30px auto;
position: relative;
}
.loader .loader-inner{
width: 15px;
height: 15px;
border-radius: 50%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader .box-1{
background: #0077bb;
z-index: 10;
transform: rotate(0deg) translateX(80px);
animation: loading-1 2.5s ease-in-out infinite alternate;
}
.loader .box-2{
background: #a3f7b5;
z-index: 8;
transform: rotate(-90deg) translateX(80px);
animation: loading-2 2.5s ease-in-out infinite alternate;
}
.loader .box-3{
background: #bd632f;
z-index: 6;
transform: rotate(180deg) translateX(80px);
animation: loading-3 2.5s ease-in-out infinite alternate;
}
.loader .box-4{
background: #006C34;
z-index: 4;
transform: rotate(90deg) translateX(80px);
animation: loading-4 2.5s ease-in-out infinite alternate;
}
.loader .box-5{
background: #f1c40f;
z-index: 5;
transform: rotate(135deg) translateX(80px);
animation: loading-5 2.5s ease-in-out infinite alternate;
}
.loader .box-6{
background: #000;
z-index: 7;
transform: rotate(225deg) translateX(80px);
animation: loading-6 2.5s ease-in-out infinite alternate;
}
.loader .box-7{
background: #d90368;
z-index: 9;
transform: rotate(315deg) translateX(80px);
animation: loading-7 2.5s ease-in-out infinite alternate;
}
.loader .box-8{
background: #f75c03;
z-index: 3;
transform: rotate(405deg) translateX(80px);
animation: loading-8 2.5s ease-in-out infinite alternate;
}
@keyframes loading-1{
0%{
transform: rotate(0deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(360deg) translateX(0px) scale(1.2,1.2);
}
}
@keyframes loading-2{
0%{
transform: rotate(-90deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(270deg) translateX(0px) scale(1.6,1.6);
}
}
@keyframes loading-3{
0%{
transform: rotate(180deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(540deg) translateX(0px) scale(2,2);
}
}
@keyframes loading-4{
0%{
transform: rotate(90deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(450deg) translateX(0px) scale(2.4,2.4);
}
}
@keyframes loading-5{
0%{
transform: rotate(135deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(495deg) translateX(0px) scale(2.2,2.2);
}
}
@keyframes loading-6{
0%{
transform: rotate(225deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(585deg) translateX(0px) scale(1.8,1.8);
}
}
@keyframes loading-7{
0%{
transform: rotate(315deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(675deg) translateX(0px) scale(1.4,1.4);
}
}
@keyframes loading-8{
0%{
transform: rotate(405deg) translateX(80px) scale(1,1);
}
100%{
transform: rotate(765deg) translateX(0px) scale(2.6,2.6);
}
}