
Подробное описание и демонстрацией работы эффекта загрузки под номером №37 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 37
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div></div> <div></div> <div></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 300px; height: 150px; position: relative; margin: 30px auto 0; } .loader div{ position: absolute; left: 50%; width: 21px; height: 21px; border-radius: 50%; background: #f8acbe; margin-top: 50px; animation: loading 2.1s linear infinite; } .loader div:nth-child(1){ animation-delay: -0.7s; } .loader div:nth-child(2){ animation-delay: -1.4s; } @-webkit-keyframes loading{ 0% { transform: translateX(0px) translateY(0px); } 12.5% { transform: translateX(27.5px) translateY(-57px) scale(1.1); background: #f8acbe; } 25% { transform: translateX(55px) translateY(0px); animation-timing-function: ease-out; } 37.5% { transform: translateX(27.5px) translateY(57px); } 50% { transform: translateX(0px) translateY(0px); } 62.5% { transform: translateX(-27.5px) translateY(-57px) scale(1.1); animation-timing-function: ease-in; } 75% { transform: translateX(-55px) translateY(0px); animation-timing-function: ease-out; } 87.5% { transform: translateX(-27.5px) translateY(57px); } 100% { transform: translateX(0px) translateY(0px); } } @keyframes loading{ 0% { transform: translateX(0px) translateY(0px); } 12.5% { transform: translateX(27.5px) translateY(-57px) scale(1.1); background: #f8acbe; } 25% { transform: translateX(55px) translateY(0px); animation-timing-function: ease-out; } 37.5% { transform: translateX(27.5px) translateY(57px); } 50% { transform: translateX(0px) translateY(0px); } 62.5% { transform: translateX(-27.5px) translateY(-57px) scale(1.1); animation-timing-function: ease-in; } 75% { transform: translateX(-55px) translateY(0px); animation-timing-function: ease-out; } 87.5% { transform: translateX(-27.5px) translateY(57px); } 100% { transform: translateX(0px) translateY(0px); } }