Подробное описание и демонстрацией работы эффекта загрузки под номером №96 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 96
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <span></span> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 160px;
height: 160px;
border-radius: 50%;
background: #ef233c;
margin: 30px auto;
}
.loader .loader-inner{
width: 100%;
height: 100%;
position: relative;
-webkit-animation: loading-1 1s infinite linear;
animation: loading-1 1s infinite linear;
}
.loader span{
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background:#fff;
position: absolute;
top: 10%;
overflow: hidden;
}
@-webkit-keyframes loading-1{
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-keyframes loading-1{
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}