Подробное описание и демонстрацией работы эффекта загрузки под номером №75 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 75
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loading loader-inner-4"></div> <div class="loading loader-inner-3"></div> <div class="loading loader-inner-2"></div> <div class="loading loader-inner-1"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{
background: #4b4673;
}
.loader{
width: 150px;
height: 150px;
margin: 30px auto;
position: relative;
}
.loading{
position: absolute;
border-top: 2px solid #ed8a87;
border-bottom: 2px solid transparent;
border-left: 2px solid #ed8a87;
border-right: 2px solid transparent;
border-radius: 50%;
-webkit-animation: loading-1 2s infinite;
animation: loading-1 2s infinite;
}
.loader .loader-inner-1{
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
.loader .loader-inner-2{
width: 70px;
height: 70px;
top: 40px;
left: 40px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader-inner-3{
width: 90px;
height: 90px;
top: 30px;
left: 30px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader .loader-inner-4{
width: 110px;
height: 110px;
top: 20px;
left: 20px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loading-1{
50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
}
@keyframes loading-1{
50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
}