Preloader для сайта — стиль 151

Подробное описание и демонстрацией работы эффекта загрузки под номером №151 для библиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки страницы

<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>
</div>
</div>
</div>

css разметка для реализации эффекта загрузки страницы

.loader{
width: 50px;
height: 50px;
margin: 100px auto;
position: relative;
-webkit-animation: loading-1 2s infinite ease-in-out;
animation: loading-1 2s infinite ease-in-out;
}
.loader .loader-inner{
width: 50px;
height: 50px;
border: 4px solid #000;
position: absolute;
top: 0;
left: 0;
}
.loader .loader-inner:nth-child(1){
-webkit-animation: loading-2 2s ease-in-out infinite;
animation: loading-2 2s ease-in-out infinite;
}
.loader .loader-inner:nth-child(2){
-webkit-animation: loading-3 2s ease-in-out infinite;
animation: loading-3 2s ease-in-out infinite;
}
.loader .loader-inner:nth-child(3){
-webkit-animation: loading-4 2s ease-in-out infinite;
animation: loading-4 2s ease-in-out infinite;
}
.loader .loader-inner:nth-child(4){
-webkit-animation: loading-5 2s ease-in-out infinite;
animation: loading-5 2s ease-in-out infinite;
}
@-webkit-keyframes loading-1{
0%{
transform:rotate(-45deg);
}
50%{
transform:rotate(-135deg);
}
100%{
transform:rotate(-225deg);
}
}
@keyframes loading-1{
0%{
transform:rotate(-45deg);
}
50%{
transform:rotate(-135deg);
}
100%{
transform:rotate(-225deg);
}
}
@-webkit-keyframes loading-2{
0%{
transform:translate(0);
}
50%{
transform:translate(-50px, 0);
border-color:#ff005b;
}
100%{
transform:translate(0);
}
}
@keyframes loading-2{
0%{
transform:translate(0);
}
50%{
transform:translate(-50px, 0);
border-color:#ff005b;
}
100%{
transform:translate(0);
}
}
@-webkit-keyframes loading-3{
0%{
transform:translate(0);
}
50%{
transform:translate(50px, 0);
border-color:#97d700;
}
100%{
transform:translate(0);
}
}
@keyframes loading-3{
0%{
transform:translate(0);
}
50%{
transform:translate(50px, 0);
border-color:#97d700;
}
100%{
transform:translate(0);
}
}
@-webkit-keyframes loading-4{
0%{
transform: translate(0);
}
50%{
transform: translate(0, -50px);
border-color: #fa7921;
}
100%{
transform:translate(0);
}
}
@keyframes loading-4{
0%{
transform: translate(0);
}
50%{
transform: translate(0, -50px);
border-color: #fa7921;
}
100%{
transform:translate(0);
}
}
@-webkit-keyframes loading-5{
0%{
transform:translate(0);
}
50%{
transform:translate(0, 50px);
border-color:#00bfea;
}
100%{
transform:translate(0);
}
}
@keyframes loading-5{
0%{
transform:translate(0);
}
50%{
transform:translate(0, 50px);
border-color:#00bfea;
}
100%{
transform:translate(0);
}
}

Теги: