Подробное описание и демонстрацией работы эффекта загрузки под номером №183 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 183
<div class="demo"> <div class="loader"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #454444; } .loader{ width: 70px; height: 70px; border-radius: 50%; background: #1bb1e9; margin: 40px auto; position: relative; -webkit-animation: loading-2 0.5s ease-in-out infinite; animation: loading-2 0.5s ease-in-out infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .loader:before, .loader:after{ content: ""; position: absolute; } .loader:before{ width: 60px; height: 60px; border-radius: 50%; background: #454444; top: 10px; left: 15px; -webkit-animation: loading-1 1s ease-in-out infinite; animation: loading-1 1s ease-in-out infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } .loader:after{ width: 40px; height: 40px; border-radius: 50%; background: #48cafa; top: 20px; left: 25px; -webkit-animation: loading-1 1.5s ease-in-out infinite; animation: loading-1 1.5s ease-in-out infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } @-webkit-keyframes loading-1{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 65%{ -webkit-transform: scale(0.3); transform: scale(0.3); } 100%{ -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes loading-1{ 0%{ -webkit-transform: scale(1); transform: scale(1); } 65%{ -webkit-transform: scale(0.3); transform: scale(0.3); } 100%{ -webkit-transform: scale(1.3); transform: scale(1.3); } } @-webkit-keyframes loading-2{ from{ -webkit-transform: scale(1); transform: scale(1); } to{ -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes loading-2{ from{ -webkit-transform: scale(1); transform: scale(1); } to{ -webkit-transform: scale(1.1); transform: scale(1.1); } }