
Подробное описание и демонстрацией работы эффекта загрузки под номером №60 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 60
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="box-1"><span class="loader-inner"></span></span> <span class="box-2"><span class="loader-inner"></span></span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 46px; height: 46px; border-radius: 50%; position: relative; background: #ddd; margin: 50px auto; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset, 0 0 25px rgba(0, 0, 255, 0.075); } .loader:after{ content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; position: absolute; top: 18%; left: 17%; border: 15px double #ddd; } .loader > span{ width: 50%; height: 100%; position: absolute; overflow: hidden; } .loader .box-1{ left: 0; } .loader .box-2{ left: 50%; } .loader .loader-inner{ width: 100%; height: 100%; border-radius: 999px; position: absolute; top: 0; left: 100%; background: #0a9a8b; opacity: 0.8; -webkit-animation: loading 3s infinite; animation: loading 3s infinite; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; } .loader .box-1 .loader-inner{ border-top-left-radius: 0; border-bottom-left-radius: 0; } .loader .box-2 .loader-inner{ border-top-right-radius: 0; border-bottom-right-radius: 0; left: -100%; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; } @-webkit-keyframes loading{ 0% { -webkit-transform: rotate(0deg) } 25% { -webkit-transform: rotate(0deg) } 50% { -webkit-transform: rotate(180deg) } 75% { -webkit-transform: rotate(180deg) } 100% { -webkit-transform: rotate(360deg) } } @keyframes loading{ 0% { transform: rotate(0deg) } 25% { transform: rotate(0deg) } 50% { transform: rotate(180deg) } 75% { transform: rotate(180deg) } 100% { transform: rotate(360deg) } }