Preloader для сайта — стиль 39

Подробное описание и демонстрацией работы эффекта загрузки под номером №39 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.

html разметка для реализации эффекта загрузки страницы

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<span></span>
<i class="fa fa-pencil fa-3x"></i>
</div>
<p class="text">jQuery<span>Rain</span></p>
</div>
</div>
</div>

css разметка для реализации эффекта загрузки страницы

.loader{
display: inline-block;
margin-top: 30px;
margin-left: -110px;
position: relative;
left: 50%;
}
.loader span{
display: inline-block;
height: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #dc005a;
-moz-animation: line 2s infinite alternate;
-webkit-animation: line 2s infinite alternate;
animation: line 2s infinite alternate;
-moz-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.loader i{
position: absolute;
top: -30px;
color: #7a4b94;
}
.text{
font-family: 'sans-serif';
font-weight: 100;
color: #dc005a;
font-size: 32px;
text-align: center;
}
.text span{
color: #7A4B94;
display: inline-block;
margin-left: 5px;
}
@-moz-keyframes line{
0% {
width: 0;
}
100% {
width: 230px;
}
}
@-webkit-keyframes line{
0% {
width: 0;
}
100% {
width: 230px;
}
}
@keyframes line{
0% {
width: 0;
}
100% {
width: 230px;
}
}

Теги: