Подробное описание и демонстрацией работы эффекта загрузки под номером №62 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 62
Loading…
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <p>Loading...</p> <div class="loader-inner"></div> <div class="loader-inner"></div> <div class="loader-inner"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 70px; height: 70px; margin: 40px auto; } .loader p{ font-size: 16px; color: #777; } .loader .loader-inner{ display: inline-block; width: 15px; border-radius: 15px; background: #74d2ba; } .loader .loader-inner:nth-last-child(1){ -webkit-animation: loading 1.5s 1s infinite; animation: loading 1.5s 1s infinite; } .loader .loader-inner:nth-last-child(2){ -webkit-animation: loading 1.5s .5s infinite; animation: loading 1.5s .5s infinite; } .loader .loader-inner:nth-last-child(3){ -webkit-animation: loading 1.5s 0s infinite; animation: loading 1.5s 0s infinite; } @-webkit-keyframes loading{ 0%{ height: 15px; } 50%{ height: 35px; } 100%{ height: 15px; } } @keyframes loading{ 0%{ height: 15px; } 50%{ height: 35px; } 100%{ height: 15px; } }