Подробное описание и демонстрацией работы эффекта загрузки под номером №207 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 207
<div class="loader"></div>css разметка для реализации эффекта загрузки тсраницы
.loader{ color: #3498db; background: #e84393; width: 40px; height:80px; margin: 40px auto 0; position: relative; animation: load1 1s infinite ease-in-out; animation-delay: -0.16s; } .loader:before, .loader:after{ background: #e84393; width: 40px; height: 80px; animation: load1 1s infinite ease-in-out; } .loader:before, .loader:after{ content: ""; position: absolute; top: 0; } .loader:before{ left: -60px; animation-delay: -0.32s; } .loader:after{ left: 60px; } @keyframes load1{ 0%, 80%, 100% { box-shadow: 0 0; height: 41px; } 40% { box-shadow: 0 -60px; background: #c90a66; height: 41px; } }