
Подробное описание и демонстрацией работы эффекта загрузки под номером №171 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 171
<div class="loader"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"></div> </div> </div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ overflow: hidden; } .loader .loader-inner{ width: 260px; height: 260px; background: #77379a; border-radius: 100% 0 100% 0; padding: 15px; margin: 64px auto; box-sizing: border-box; position: relative; animation: loading-1 10s linear forwards infinite; } .loader .loader-inner:before{ content: ""; background: #fff; border-radius: 0 100% 0 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .loader .loader-inner > .loader-inner{ width: 100%; height: 100%; margin: 0; } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }