Подробное описание и демонстрацией работы эффекта загрузки под номером №200 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 200
<div class="loader"> <div class="loader-inner"></div> <div class="loader-inner"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #7e2133; } .loader{ width: 200px; height: 150px; margin: 30px auto; position: relative; } .loader .loader-inner{ width: 62px; height: 62px; background: #c8ff02; margin-left: -35%; position: absolute; top: 50%; left: 50%; transform-origin: top right; animation: loading-1 4s ease-in-out infinite; } .loader .loader-inner:nth-child(2){ animation-delay: -2s; } @keyframes loading-1{ 16.6666666667%{ -webkit-transform: rotate(0); transform: rotate(0); } 33.3333333333%{ -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } 50%{ -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } 66.6666666667%{ -webkit-transform: rotate(0.75turn); transform: rotate(0.75turn); } 83.3333333333%{ -webkit-transform: rotate(0.75turn); transform: rotate(0.75turn); } 100%{ -webkit-transform: rotate(1turn); transform: rotate(1turn); } }