Подробное описание и демонстрацией работы эффекта загрузки под номером №38 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 38
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{
width: 80px;
display: flex;
justify-content: center;
overflow: hidden;
margin: 40px auto;
}
.loader .loader-inner{
width: 10px;
height: 20px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: -15px 0 0 rgba(0, 0, 0, 0.3), -30px 0 0 rgba(0, 0, 0, 0.3), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.3);
}
.loader .box{
position: relative;
width: 100%;
height: 100%;
background-color: #f7eac8;
box-shadow: -15px 0 0 #f7eac8, 15px 0 0 #f7eac8;
animation: loading 1s steps(7, end) infinite;
}
@-webkit-keyframes loading{
0% {
transform: translatex(-45px);
}
100% {
transform: translatex(60px);
}
}
@keyframes loading{
0% {
transform: translatex(-45px);
}
100% {
transform: translatex(60px);
}
}