
Подробное описание и демонстрацией работы эффекта загрузки под номером №194 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 194
<div class="demo"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #312b5e; } .loader{ width: 300px; height: 300px; margin: 0 auto; position: relative; } .loader .loader-inner-1{ width: 300px; height: 300px; border-radius: 50%; border-bottom: 10px dashed #fca107; position: absolute; animation: loading-1 5s infinite linear; } .loader .loader-inner-2{ width: 200px; height: 200px; border-radius: 50%; border-bottom: 10px dotted #78f124; position: absolute; top: 50px; left: 45px; animation: loading-1 1s infinite linear; } .loader .loader-inner-3{ width: 100px; height: 100px; border-radius: 50%; border-bottom: 5px solid #ff0728; position: absolute; top: 100px; left: 90px; animation: loading-1 2s infinite linear; } @keyframes loading-1{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } }