
Подробное описание и демонстрацией работы эффекта загрузки под номером №24 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 24
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { width: 40px; height: 100px; margin: 0 auto; } .loader .loader-inner { width: 40px; height: 40px; border-radius: 20px; background: #ecf0f1; -webkit-animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out; } @-webkit-keyframes bounce{ 40% { height: 40px; } 50% { -webkit-transform: translate(0, 65px); transform: translate(0, 65px); height: 34px; border-radius: 20px; } 65% { height: 40px; } } @keyframes bounce { 40% { height: 40px; } 50% { -webkit-transform: translate(0, 65px); transform: translate(0, 65px); height: 34px; border-radius: 20px; } 65% { height: 40px; } }