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

Подробное описание и демонстрацией работы эффекта загрузки под номером №43 для бибилиотеки 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 class="line-1"></div>
<div class="line-1"></div>
<div class="line-1"></div>
</div>
</div>
</div>
</div>
</div>

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

.loader {
width: 200px;
height: 37px;
border: 2px solid #b9607e;
background-color: #b6e0d1;
margin: 30px auto;
overflow: hidden;
}
.loader-inner {
width: 168px;
-moz-animation-name: loading;
-moz-animation-duration: 2.8s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: linear;
-webkit-animation-name: loading;
-webkit-animation-duration: 2.8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-ms-animation-name: loading;
-ms-animation-duration: 2.8s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: linear;
-o-animation-name: loading;
-o-animation-duration: 2.8s;
-o-animation-iteration-count: infinite;
-o-animation-direction: linear;
animation-name: loading;
animation-duration: 2.8s;
animation-iteration-count: infinite;
animation-direction: linear;
}
.line-1 {
width: 18px;
height: 120px;
float: left;
background-color: #3a9ad9;
margin-right: 17px;
margin-top: -28px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
@-moz-keyframes loading {
0% {
margin-left: -128px;
margin-top: -18px
}
100% {
margin-left: 340px;
margin-top: -18px
}
}
@-webkit-keyframes loading {
0% {
margin-left: -128px;
margin-top: -18px
}
100% {
margin-left: 340px;
margin-top: -18px
}
}
@-ms-keyframes loading {
0% {
margin-left: -128px;
margin-top: -18px
}
100% {
margin-left: 340px;
margin-top: -18px
}
}
@-o-keyframes loading {
0% {
margin-left: -128px;
margin-top: -18px
}
100% {
margin-left: 340px;
margin-top: -18px
}
}
@keyframes loading {
0% {
margin-left: -128px;
margin-top: -18px
}
100% {
margin-left: 340px;
margin-top: -18px
}
}

Теги: