Подробное описание и демонстрацией работы эффекта загрузки под номером №122 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 122
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <div class="box-4"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #3c3c3c; }
.loader{
width: 210px;
height: 210px;
margin: 50px auto;
}
.loader div{
width: 100px;
height: 100px;
float: left;
position: relative;
animation: 3s linear 0s normal none infinite running loading-1;
}
.loader .box-1{
top: 15px;
left: 15px;
background: rgba(255, 192, 0, 0.5);
border-radius: 0 50% 50%;
box-shadow: 0 0 15px #ffc000 inset, 0 0 15px rgba(255, 255, 255, 0.2);
}
.loader .box-2{
top: 15px;
right: 15px;
background: rgba(227, 65, 114, 0.5);
border-radius: 50% 0 50% 50%;
box-shadow: 0 0 15px #e34172 inset, 0 0 15px rgba(255, 255, 255, 0.2);
}
.loader .box-3{
bottom: 15px;
left: 15px;
background: rgba(134, 93, 194, 0.5);
border-radius: 50% 50% 50% 0;
box-shadow: 0 0 15px #865dc2 inset, 0 0 15px rgba(255, 255, 255, 0.2);
}
.loader .box-4{
bottom: 15px;
right: 15px;
background: rgba(6, 148, 126, 0.5);
border-radius: 50% 50% 0;
box-shadow: 0 0 15px #06947e inset, 0 0 15px rgba(255, 255, 255, 0.2);
}
@-webkit-keyframes loading-1{
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
@keyframes loading-1{
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}