
Подробное описание и демонстрацией работы эффекта загрузки под номером №53 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 53
Loading…
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="loader-inner">Loading...</span> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 128px; height: 128px; line-height: 128px; border-radius: 50%; border-top: 5px solid #eb6c18; color: #fff; text-align: center; position: relative; margin: 30px auto; -webkit-animation: 2s loading1 ease-in-out infinite; animation: 2s loading1 ease-in-out infinite; } .loader:before, .loader:after{ content: ""; display: block; width: 128px; height: 128px; border-radius: 50%; position: absolute; top: -5px; left: 0; } .loader:before{ border-top: 5px solid #c3c659; -webkit-transform: rotate(120deg); transform: rotate(120deg) } .loader:after{ border-top: 5px solid #b93be6; -webkit-transform: rotate(240deg); transform: rotate(240deg) } .loader .loader-inner{ display: block; width: 128px; height: 128px; position: absolute; top: -5px; left: 0; -webkit-animation: 2s loading2 linear infinite; animation: 2s loading2 linear infinite; } @-webkit-keyframes loading1{ 50% { -webkit-transform: rotate(180deg) } 100% { -webkit-transform: rotate(360deg) } } @keyframes loading1{ 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes loading2{ 50% { -webkit-transform: rotate(-180deg) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes loading2{ 50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg) } }