
Подробное описание и демонстрацией работы эффекта загрузки под номером №26 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 26
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> <div class="box10"></div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.loader{ width: 70px; height: 40px; margin: 30px auto; } .loader > div{ width: 5px; height: 5px; float: left; background: #d3b142; margin-right: 1px; display: inline-block; position: relative; bottom: 0; margin-top: 35px; -webkit-animation: loading 1.5s infinite ease-in-out; -moz-animation: loading 1.5s infinite ease-in-out; -o-animation: loading 1.5s infinite ease-in-out; animation: loading 1.5s infinite ease-in-out; } .loader .box1 { -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; } .loader .box2 { -webkit-animation-delay: -1.4s; -moz-animation-delay: -1.4s; -o-animation-delay: -1.4s; animation-delay: -1.4s; } .loader .box3 { -webkit-animation-delay: -1.3s; -moz-animation-delay: -1.3s; -o-animation-delay: -1.3s; animation-delay: -1.3s; } .loader .box4 { -webkit-animation-delay: -1.2s; -moz-animation-delay: -1.2s; -o-animation-delay: -1.2s; animation-delay: -1.2s; } .loader .box5 { -webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s; } .loader .box6 { -webkit-animation-delay: -1s; -moz-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s; } .loader .box7 { -webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s; } .loader .box8 { -webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s; } .loader .box9 { -webkit-animation-delay: -0.7s; -moz-animation-delay: -0.7s; -o-animation-delay: -0.7s; animation-delay: -0.7s; } .loader .box10 { -webkit-animation-delay: -0.6s; -moz-animation-delay: -0.6s; -o-animation-delay: -0.6s; animation-delay: -0.6s; } @-webkit-keyframes loading { 50% { height: 100%; margin-top: 0; background: #ef5ee5; } } @-moz-keyframes loading { 50% { height: 100%; margin-top: 0; background: #ef5ee5; } } @-o-keyframes loading { 50% { height: 100%; margin-top: 0; background: #ef5ee5; } } @keyframes loading { 50% { height: 100%; margin-top: 0; background: #ef5ee5; } }