Подробное описание и демонстрацией работы эффекта загрузки под номером №9 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 9
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
margin: 60px auto;
position: relative;
border: 1px solid transparent;
}
.loader-inner {
position: absolute;
left: 50%;
top:-10px;
}
.loader-inner > div {
width: 5px;
height: 15px;
background-color: #fff;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
.loader-inner > div:nth-child(1) {
top: 20px;
left: 0;
-webkit-animation: loader-inner 1.2s -0.84s infinite ease-in-out;
animation: loader-inner 1.2s -0.84s infinite ease-in-out;
}
.loader-inner > div:nth-child(2) {
top: 13.63636px;
left: 13.63636px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: loader-inner 1.2s -0.72s infinite ease-in-out;
animation: loader-inner 1.2s -0.72s infinite ease-in-out;
}
.loader-inner > div:nth-child(3) {
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: loader-inner 1.2s -0.6s infinite ease-in-out;
animation: loader-inner 1.2s -0.6s infinite ease-in-out;
}
.loader-inner > div:nth-child(4) {
top: -13.63636px;
left: 13.63636px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: loader-inner 1.2s -0.48s infinite ease-in-out;
animation: loader-inner 1.2s -0.48s infinite ease-in-out;
}
.loader-inner > div:nth-child(5) {
top: -20px;
left: 0;
-webkit-animation: loader-inner 1.2s -0.36s infinite ease-in-out;
animation: loader-inner 1.2s -0.36s infinite ease-in-out;
}
.loader-inner > div:nth-child(6) {
top: -13.63636px;
left: -13.63636px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: loader-inner 1.2s -0.24s infinite ease-in-out;
animation: loader-inner 1.2s -0.24s infinite ease-in-out;
}
.loader-inner > div:nth-child(7) {
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: loader-inner 1.2s -0.12s infinite ease-in-out;
animation: loader-inner 1.2s -0.12s infinite ease-in-out;
}
.loader-inner > div:nth-child(8) {
top: 13.63636px;
left: -13.63636px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: loader-inner 1.2s 0s infinite ease-in-out;
animation: loader-inner 1.2s 0s infinite ease-in-out;
}
@keyframes loader-inner {
50% {
opacity: 0.3; }
100% {
opacity: 1; }
}
@-webkit-keyframes loader-inner {
50% {
opacity: 0.3; }
100% {
opacity: 1; }
}