Подробное описание и демонстрацией работы эффекта загрузки под номером №189 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 189
<div class="loader"> <div class="loader-inner"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 200px; height: 100px; margin: 30px auto; overflow: hidden; } .loader .loader-inner{ width: 150px; height: 4px; background: #264080; border-radius: 2px; margin: 70px auto 0; position: relative; animation: loading-1 1.5s infinite ease-in-out; } .loader .loader-inner:after{ content: ""; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 5px dotted #c58e5e; position: absolute; top: -50px; animation: loading-2 1.5s infinite ease-in-out; } @keyframes loading-1{ 0%, 100%{ transform: rotate(0); } 30%{ transform: rotate(10deg); } 66%{ transform: rotate(-10deg); } } @keyframes loading-2{ 0%, 100%{ transform: translate(-10px, 0) rotate(0); } 50%{ transform: translate(100px, 0) rotate(180deg); } }