Подробное описание и демонстрацией работы эффекта загрузки под номером №93 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 93
<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 разметка для реализации эффекта загрузки тсраницы
.demo{ background: #474747; }
.loader{
width: 100px;
height: 100px;
margin: 70px auto;
position: relative;
}
.loader > div{
border: 8px solid transparent;
border-color: #ff9f1c transparent;
border-radius: 100%;
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%) rotate(0);
-moz-transform: translate(-50%, -50%) rotate(0);
-ms-transform: translate(-50%, -50%) rotate(0);
-o-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
-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: 20px;
height: 20px;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader-inner-2{
width: 25px;
height: 25px;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader-inner-3{
width: 35px;
height: 35px;
-webkit-animation-dela1y: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader-inner-4{
width: 45px;
height: 45px;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader .loader-inner-5{
width: 55px;
height: 55px;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.loader .loader-inner-6{
width: 65px;
height: 65px;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.loader .loader-inner-7{
width: 75px;
height: 75px;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.loader .loader-inner-8{
width: 80px;
height: 80px;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.loader .loader-inner-9{
width: 85px;
height: 85px;
-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-1{
50%{
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
border-color:#2EC4B6 transparent;
}
}
@-moz-keyframes loading-1{
50%{
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
border-color:#2EC4B6 transparent;
}
}
@-o-keyframes loading-1{
50%{
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
border-color:#2EC4B6 transparent;
}
}
@keyframes loading-1{
50%{
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-o-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
border-color:#2EC4B6 transparent;
}
}