Подробное описание и демонстрацией работы эффекта загрузки под номером №80 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 80
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 100px;
height: 100px;
margin: 70px auto;
animation: loading-2 8s infinite;
}
.loader .loader-inner{
width: 27px;
height: 27px;
border-radius: 5px;
background: #dc2742;
float: left;
margin: 3px;
animation-name: loading-1;
animation-direction: alternate;
animation-duration: 800ms;
animation-iteration-count: infinite;
}
.loader .loader-inner:nth-child(1) { animation-delay: 200ms; }
.loader .loader-inner:nth-child(2) { animation-delay: 400ms; }
.loader .loader-inner:nth-child(3) { animation-delay: 600ms; }
.loader .loader-inner:nth-child(4) { animation-delay: 400ms; }
.loader .loader-inner:nth-child(5) { animation-delay: 600ms; }
.loader .loader-inner:nth-child(6) { animation-delay: 800ms; }
.loader .loader-inner:nth-child(7) { animation-delay: 600ms; }
.loader .loader-inner:nth-child(8) { animation-delay: 800ms; }
.loader .loader-inner:nth-child(9) { animation-delay: 1s; }
@-webkit-keyframes loading-1{
0% {
background-color: #dc2742;
transform: scale(1, 1);
}
100% {
background-color: #0dc3ef;
transform: scale(0, 0);
}
}
@keyframes loading-1{
0% {
background-color: #dc2742;
transform: scale(1, 1);
}
100% {
background-color: #0dc3ef;
transform: scale(0, 0);
}
}
@-webkit-keyframes loading-2{
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-2{
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}