Подробное описание и демонстрацией работы эффекта загрузки под номером №76 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 76
L
o
a
d
i
n
g
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <span class="loading"> <span>L</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span> </span> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{
background: #99b977;
}
.loader{
width: 300px;
margin: 50px auto;
text-align: center;
padding: 10px 0 30px;
border-bottom: 1px solid #846cf4;
}
.loader span{
position: relative;
display: inline-block;
font-size: 18px;
color: #846cf4;
text-transform: uppercase;
}
.loader .loading span{
animation-name: loading-1;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
margin: 0 auto;
}
.loader .loading span:nth-child(1){
animation-delay: .1s;
}
.loader .loading span:nth-child(2){
animation-delay: .2s;
}
.loader .loading span:nth-child(3){
animation-delay: .3s;
}
.loader .loading span:nth-child(4){
animation-delay: .4s;
}
.loader .loading span:nth-child(5){
animation-delay: .5s;
}
.loader .loading span:nth-child(6){
animation-delay: .6s;
}
.loader .loading span:nth-child(7){
animation-delay: .7s;
}
@-webkit-keyframes loading-1{
from {
transform: translate(0px, 0px);
}
25%{
transform: translate(0px, -10px);
}
to{
transform: translate(0px, 0px);
}
}
@keyframes loading-1{
from {
transform: translate(0px, 0px);
}
25%{
transform: translate(0px, -10px);
}
to{
transform: translate(0px, 0px);
}
}