Подробное описание и демонстрацией работы эффекта загрузки под номером №198 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 198
<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>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 300px;
height: 300px;
margin: 20px auto;
position: relative;
}
.loader .loader-inner{
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
transition: all 0.8s ease-in-out;
}
.loader .box-1{
background: #89fc00;
top: 125px;
right: 0;
-webkit-animation: loading-1 2.2s infinite;
animation: loading-1 2.2s infinite;
}
.loader .box-2{
background: #dc0073;
top: 125px;
-webkit-animation: loading-2 2.2s infinite;
animation: loading-2 2.2s infinite;
}
.loader .box-3{
background: #1be7ff;
top: 0;
left: 125px;
-webkit-animation: loading-3 2.2s infinite;
animation: loading-3 2.2s infinite;
}
.loader .box-4{
background: #ffb800;
bottom: 0;
left: 125px;
-webkit-animation: loading-4 2.2s infinite;
animation: loading-4 2.2s infinite;
}
@keyframes loading-1{
0%{ transform: translateX(0px); }
50%{ transform: translateX(-250px); }
100%{ transform: translateX(0px); }
}
@keyframes loading-2{
0%{ transform: translateX(0px); }
50%{ transform: translateX(250px); }
100%{ transform: translateX(0px); }
}
@keyframes loading-3{
0%{ transform: translateY(0px); }
50%{ transform: translateY(250px); }
100%{ transform: translateY(0px); }
}
@keyframes loading-4{
0%{ transform: translateY(0px); }
50%{ transform: translateY(-250px); }
100%{ transform: translateY(0px); }
}