
Подробное описание и демонстрацией работы эффекта загрузки под номером №161 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 161
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span></span> <span class="loader-inner"></span> <span></span> <span></span> <span class="loader-inner"></span> <span></span> <span></span> <span class="loader-inner"></span> <span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #55471b; } .loader{ width: 170px; height: 160px; margin: 50px auto; position: relative; } .loader span{ display: inline-block; width: 50px; height: 50px; border-radius: 4px; background: #ead2ac; transform-origin: bottom left; -webkit-animation: loading-1 2s ease-in-out alternate infinite; animation: loading-1 2s ease-in-out alternate infinite; } .loader .loader-inner{ animation-delay: 2s; } @-webkit-keyframes loading-1{ from{ -webkit-transform: rotate(0); } to{ -webkit-transform: rotate(-90deg); } } @keyframes loading-1{ from{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } to{ -webkit-transform: rotate(0); transform: rotate(0); } }