
Подробное описание и демонстрацией работы эффекта загрузки под номером №201 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 201
<div class="demo"> <div class="loader"> <div class="loader-inner"></div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #3d0c11; } .loader{ width: 300px; height: 300px; margin: 0 auto; overflow: hidden; position: relative; } .loader .loader-inner{ width: 100%; height: 100%; background-image: radial-gradient(transparent 50%, #d4cb92 0, #d4cb92 60%, transparent 60%), radial-gradient(transparent 50%, #D4CB92 0, #D4CB92 60%, transparent 60%), radial-gradient(transparent 50%, #d4cb92 0, #d4cb92 60%, transparent 60%), radial-gradient(transparent 50%, #d4cb92 0, #d4cb92 60%, transparent 60%); background-size: 200px 50px, 150px 50px, 100px 40px, 50px 20px; background-position: 50% 30%, 50% 38%, 50% 48%, 50% 60%; background-repeat: no-repeat; position: absolute; top: 10%; left: 0; animation: 2s loading-1 infinite; } @keyframes loading-1{ 50%{ background-position: 50% 40%, 50% 30%, 50% 20%, 50% 10%; } }