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

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

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

<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner box-1"></div>
<div class="loader-inner box-2"></div>
<div class="loader-inner box-3"></div>
<div class="loader-inner box-4"></div>
<div class="loader-inner box-5"></div>
<div class="loader-inner box-6"></div>
<div class="loader-inner box-7"></div>
<div class="loader-inner box-8"></div>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #454444; }
.loader{
width: 60px;
height: 60px;
border-radius: 50%;
margin: 70px auto;
position: relative;
}
.loader .loader-inner{
display: block;
margin: 10px 0;
border-bottom: 23px solid #42b7ed;
border-right: 26px solid transparent;
border-left: 23px solid transparent;
opacity: 0.4;
position: absolute;
-webkit-transform: rotate(180deg) scale(0.5);
transform: rotate(180deg) scale(0.5);
}
.loader .loader-inner:before{
content: "";
display: block;
border-bottom: 18px solid #42b7ed;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
top: -9px;
left: -16px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.loader .loader-inner:after{
content: "";
display: block;
border-bottom: 22px solid #42b7ed;
border-right: 25px solid transparent;
border-left: 27px solid transparent;
position: absolute;
top: 2px;
left: -26px;
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
.loader .box-1{
top: -20px;
left: 5px;
-webkit-animation: loading-1 1s 0.125s ease infinite;
animation: loading-1 1s 0.125s ease infinite;
}
.loader .box-2{
top: -10px;
left: 25px;
-webkit-animation: loading-1 1s 0.3s ease infinite;
animation: loading-1 1s 0.3s ease infinite;
}
.loader .box-3{
top: 10px;
left: 35px;
-webkit-animation: loading-1 1s 0.425s ease infinite;
animation: loading-1 1s 0.425s ease infinite;
}
.loader .box-4{
top: 30px;
left: 27px;
-webkit-animation: loading-1 1s 0.540s ease infinite;
animation: loading-1 1s 0.540s ease infinite;
}
.loader .box-5{
top: 40px;
left: 5px;
-webkit-animation: loading-1 1s 0.665s ease infinite;
animation: loading-1 1s 0.665s ease infinite;
}
.loader .box-6{
top: 30px;
left: -15px;
-webkit-animation: loading-1 1s 0.79s ease infinite;
animation: loading-1 1s 0.79s ease infinite;
}
.loader .box-7{
top: 10px;
left: -25px;
-webkit-animation: loading-1 1s 0.9s ease infinite;
animation: loading-1 1s 0.9s ease infinite;
}
.loader .box-8{
top: -10px;
left: -15px;
-webkit-animation: loading-1 1s 1s ease infinite;
animation: loading-1 1s 1s ease infinite;
}
@-webkit-keyframes loading-1{
0%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0px, 0) scale(0.6);
transform: rotate(180deg) translate(0px, 0) scale(0.6);
}
25%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.2);
transform: rotate(180deg) translate(0, 0) scale(0.2);
}
50%{
opacity: 0.7;
-webkit-transform: rotate(180deg) translate(5px, 5px) scale(0.4);
transform: rotate(180deg) translate(5px, 5px) scale(0.4);
}
75%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.6);
transform: rotate(180deg) translate(0, 0) scale(0.6);
}
80%{
opacity: 1;
-webkit-transform: rotate(180deg) translate(5px, 0) scale(0.1);
transform: rotate(180deg) translate(5px, 0) scale(0.1);
}
100%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.6);
transform: rotate(180deg) translate(0, 0) scale(0.6);
}
}
@keyframes loading-1{
0%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0px, 0) scale(0.6);
transform: rotate(180deg) translate(0px, 0) scale(0.6);
}
25%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.2);
transform: rotate(180deg) translate(0, 0) scale(0.2);
}
50%{
opacity: 0.7;
-webkit-transform: rotate(180deg) translate(5px, 5px) scale(0.4);
transform: rotate(180deg) translate(5px, 5px) scale(0.4);
}
75%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.6);
transform: rotate(180deg) translate(0, 0) scale(0.6);
}
80%{
opacity: 1;
-webkit-transform: rotate(180deg) translate(5px, 0) scale(0.1);
transform: rotate(180deg) translate(5px, 0) scale(0.1);
}
100%{
opacity: 0.4;
-webkit-transform: rotate(180deg) translate(0, 0) scale(0.6);
transform: rotate(180deg) translate(0, 0) scale(0.6);
}
}

Теги: