Подробное описание и демонстрацией работы эффекта загрузки под номером №83 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 83
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box-1"> <div class="box-2"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 160px; height: 160px; margin: 20px auto; position: relative; } .loader .loader-inner{ position: absolute; top: 50%; left: 50%; } .loader .box-1{ width: 74px; height: 74px; border-radius: 4px; } .loader .box-1:before, .loader .box-1:after{ bottom: 2px; } .loader .box-1:before{ left: 2px; } .loader .box-1:after{ right: 2px; } .loader .box-2{ left: 2px; top: 2px; -webkit-animation-name: loading-1; animation-name: loading-1; } .loader .box-1{ -webkit-animation-name: loading-2; animation-name: loading-2; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: steps(4); animation-timing-function: steps(4); } .loader .box-2{ -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .box-1{ position: absolute; color: #006aa4; border: 2px solid; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .loader .box-1:before, .loader .box-1:after{ content: ""; width: 32px; height: 32px; border-radius: 4px; background: #e3b23c; position: absolute; } .loader .box-1:before{ left: 2px; } .loader .box-1:after{ right: 2px; } .box-2{ position: absolute; width: 32px; height: 32px; border-radius: 4px; background: #e3b23c; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes loading-1{ 33%{ left: 2px; } 67%,100%{ left: 36px; } } @keyframes loading-1{ 33%{ left: 2px; } 67%,100%{ left: 36px; } } @-webkit-keyframes loading-2{ to{ -webkit-transform: translate(-50%, -50%) rotate(-405deg); transform: translate(-50%, -50%) rotate(-405deg); } } @keyframes loading-2{ to{ -webkit-transform: translate(-50%, -50%) rotate(-405deg); transform: translate(-50%, -50%) rotate(-405deg); } }