Подробное описание и демонстрацией работы эффекта загрузки под номером №203 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 203
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #39394a; }
.loader{
width: 140px;
height: 70px;
margin: 30px auto;
}
.loader .loader-inner{
display: inline-block;
width: 3px;
height: 55px;
background: #ac2f97;
border-radius: 500px;
background-clip: padding-box;
transform-origin: 50% 0%;
margin: 0 3px;
}
.loader .loader-inner:nth-child(1){ animation: loading-1 1s 0.05s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(2){ animation: loading-1 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(3){ animation: loading-1 1s 0.15s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(4){ animation: loading-1 1s 0.2s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(5){ animation: loading-1 1s 0.25s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(6){ animation: loading-1 1s 0.3s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(7){ animation: loading-1 1s 0.35s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(8){ animation: loading-1 1s 0.4s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(9){ animation: loading-1 1s 0.45s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
.loader .loader-inner:nth-child(10){ animation: loading-1 1s 0.5s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59); }
@keyframes loading-1{
0%{
transform: rotateZ(-20deg);
}
50%{
transform: rotateZ(20deg) scaleY(1.2);
background: #fa9feb;
}
100%{
transform: rotateZ(-20deg);
}
}