Подробное описание и демонстрацией работы эффекта загрузки под номером №13 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 13
LOADING
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> <div class="box2">LOADING</div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
@import url("http://fonts.googleapis.com/css?family=Press+Start+2P");
.loader{
width: 200px;
margin: 30px auto;
}
.loader-inner{
overflow: hidden;
height: 50px;
border-left: 2px solid #3d3d3d;
border-right: 2px solid #3d3d3d;
}
.box{
position: relative;
left: -200px;
margin-top: 10px;
width: 100%;
height: 30px;
background: #33ffbf;
border: 1px solid #a3ffd9;
box-shadow: 0px 0px 4px 1px #21ffb9;
animation: preload-status-animate 1.5s infinite cubic-bezier(.75, 0, .25, 1);
}
.box2{
opacity: 1;
margin-top: -22px;
width: 100%;
height: 30px;
font-family: "Press Start 2P", Arial, sans-serif;
text-align: center;
color:#35ffbf;
text-shadow: 0px 1px #87ffe5;
animation: preload-status-animate-2 1.5s infinite cubic-bezier(.75, 0, .25, 1);
}
@keyframes preload-status-animate {
0% { -webkit-transform: translateX(0); transform: translateX(0) }
100% { -webkit-transform: translateX(400px); transform: translateX(400px) }
}
@keyframes preload-status-animate-2 {
0% { opacity: 1; }
10% { opacity: 1; }
50% { opacity: 0; }
90% { opacity: 1; }
}