Подробное описание и демонстрацией работы эффекта загрузки под номером №81 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 81
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <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> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #12b8cd; } .loader{ width: 150px; height: 140px; padding: 30px 33px; margin: 20px auto; position: relative; } .loader .loader-inner{ width: 18px; height: 40px; float: left; margin-top: 15px; border: 2px solid #f3e6c5; margin-left: -2px; -webkit-animation: loading-1 0.6s infinite linear; animation: loading-1 0.6s infinite linear; } .loader .loader-inner:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .loader .loader-inner:last-child{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .loader .loader-inner:nth-child(2n+1){ -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes loading-1{ 50%{ margin-top: 25px; } } @keyframes loading-1 { 50%{ margin-top: 25px; } }