Подробное описание и демонстрацией работы эффекта загрузки под номером №68 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 68
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> <div class="loader-inner-4"></div> <div class="loader-inner-5"></div> <div class="loader-inner-6"></div> <div class="loader-inner-7"></div> <div class="loader-inner-8"></div> <div class="loader-inner-9"></div> <div class="loader-inner-10"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки страницы
.loader{
width: 100px;
height: 100px;
position: relative;
margin: 30px auto 80px;
}
.loader > div{
background: transparent;
opacity: 0;
filter: alpha(opacity=0);
border: 1px solid #e03400;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate"("-50%, -50%")";
-moz-transform: translate"("-50%, -50%")";
-ms-transform: translate"("-50%, -50%")";
-o-transform: translate"("-50%, -50%")";
transform: translate"("-50%, -50%")";
-webkit-transform: translate"("-50%, -50%")";
-moz-transform: translate"("-50%, -50%")";
-ms-transform: translate"("-50%, -50%")";
-o-transform: translate"("-50%, -50%")";
transform: translate"("-50%, -50%")";
-webkit-animation: loading 1.2s infinite ease-in-out;
-moz-animation: loading 1.2s infinite ease-in-out;
-o-animation: loading 1.2s infinite ease-in-out;
animation: loading 1.2s infinite ease-in-out;
}
.loader .loader-inner-1{
width: 3px;
height: 3px;
background:#00b360;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader-inner-2{
width: 10px;
height: 10px;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader-inner-3{
width: 20px;
height: 20px;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader-inner-4{
width: 30px;
height: 30px;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader .loader-inner-5{
width: 40px;
height: 40px;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.loader .loader-inner-6{
width: 50px;
height: 50px;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.loader .loader-inner-7{
width: 60px;
height: 60px;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.loader .loader-inner-8{
width: 70px;
height: 70px;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.loader .loader-inner-9{
width: 80px;
height: 80px;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.loader .loader-inner-10{
width: 90px;
height: 90px;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes loading{
25% {
border-color:#00B360;
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@-moz-keyframes loading{
25% {
border-color:#00B360;
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@-o-keyframes loading{
25% {
border-color:#00B360;
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes loading{
25% {
border-color:#00B360;
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
}