Подробное описание и демонстрацией работы эффекта загрузки под номером №133 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 133
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box"></div> <div class="loader-inner box-1"></div> <div class="loader-inner box-2"></div> <div class="loader-inner box-3"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #721123; } .loader{ width: 117px; height: 88px; margin: 50px auto; position: relative; } .loader .box{ width: 29px; height: 29px; border-radius: 50%; background: #ffb049; position: absolute; bottom: 29px; left: 26px; transform-origin: center bottom; animation: loading-1 0.69s ease-in-out infinite; } .loader .loader-inner{ width: 29px; height: 29px; border-top: 2px solid #ffb049; position: absolute; top: 0; right: 0; } .loader .box-1{ animation: loading-2 2.07s linear infinite; } .loader .box-2{ animation: loading-2 2.07s linear infinite -0.69s; } .loader .box-3{ animation: loading-2 2.07s linear infinite -1.38s; } @keyframes loading-1{ 0%{ transform: scale(1,.7); } 20%{ transform: scale(.7,1.2); } 40%{ transform: scale(1,1);} 50%{ bottom: 97px;} 46%{ transform: scale(1,1);} 80%{ transform: scale(.7,1.2);} 90%{ transform: scale(.7,1.2);} 100%{ transform: scale(1,0.7);} } @keyframes loading-2{ 0%{ opacity: 0; top: 0; right: 0; } 50%{ opacity: 1; } 100%{ top: 88px; right: 88px; opacity: 0; } }