
Подробное описание и демонстрацией работы эффекта загрузки под номером №43 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 43
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="line-1"></div> <div class="line-1"></div> <div class="line-1"></div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader { width: 200px; height: 37px; border: 2px solid #b9607e; background-color: #b6e0d1; margin: 30px auto; overflow: hidden; } .loader-inner { width: 168px; -moz-animation-name: loading; -moz-animation-duration: 2.8s; -moz-animation-iteration-count: infinite; -moz-animation-direction: linear; -webkit-animation-name: loading; -webkit-animation-duration: 2.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; -ms-animation-name: loading; -ms-animation-duration: 2.8s; -ms-animation-iteration-count: infinite; -ms-animation-direction: linear; -o-animation-name: loading; -o-animation-duration: 2.8s; -o-animation-iteration-count: infinite; -o-animation-direction: linear; animation-name: loading; animation-duration: 2.8s; animation-iteration-count: infinite; animation-direction: linear; } .line-1 { width: 18px; height: 120px; float: left; background-color: #3a9ad9; margin-right: 17px; margin-top: -28px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } @-moz-keyframes loading { 0% { margin-left: -128px; margin-top: -18px } 100% { margin-left: 340px; margin-top: -18px } } @-webkit-keyframes loading { 0% { margin-left: -128px; margin-top: -18px } 100% { margin-left: 340px; margin-top: -18px } } @-ms-keyframes loading { 0% { margin-left: -128px; margin-top: -18px } 100% { margin-left: 340px; margin-top: -18px } } @-o-keyframes loading { 0% { margin-left: -128px; margin-top: -18px } 100% { margin-left: 340px; margin-top: -18px } } @keyframes loading { 0% { margin-left: -128px; margin-top: -18px } 100% { margin-left: 340px; margin-top: -18px } }