Подробное описание и демонстрацией работы эффекта загрузки под номером №30 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 30
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="main-loader"> <div class="loader-inner"> <div class="loader"> <div class="box"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.main-loader{ position: relative; width: 160px; height: 160px; margin: 0 auto; } .loader-inner{ position: absolute; top: 50%; left: 50%; } .loader-inner .loader{ width: 106px; height: 106px; border-radius: 50%; } .loader-inner .loader:before, .loader-inner .loader:after { bottom: 18px; } .loader-inner .loader:before{ left: 18px; } .loader-inner .loader:after { right: 18px; } .loader-inner .box{ top: 18px; left: 18px; -webkit-transform-origin: 33px 33px; transform-origin: 33px 33px; -webkit-animation-name: roll; animation-name: roll; } .loader { position: absolute; color: #8c4646; 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; -webkit-animation-name: loading; animation-name: loading; } .loader:before, .loader:after { content: ""; position: absolute; width: 32px; height: 32px; background: #8c4646; border-radius: 4px; } .loader:before { left: 2px; } .loader:after { right: 2px; } .box { position: absolute; width: 32px; height: 32px; background: #8c4646; border-radius: 4px; -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 roll { 33% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 67%,100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes roll { 33% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 67%,100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes loading { 50% { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } } @keyframes loading { 50% { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } }