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

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

Демонстрация эффекта загрузки страницы — стиль 75

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loading loader-inner-4"></div>
<div class="loading loader-inner-3"></div>
<div class="loading loader-inner-2"></div>
<div class="loading loader-inner-1"></div>
</div>
</div>
</div>
</div>

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

.demo{
background: #4b4673;
}
.loader{
width: 150px;
height: 150px;
margin: 30px auto;
position: relative;
}
.loading{
position: absolute;
border-top: 2px solid #ed8a87;
border-bottom: 2px solid transparent;
border-left:  2px solid #ed8a87;
border-right: 2px solid transparent;
border-radius: 50%;
-webkit-animation: loading-1 2s infinite;
animation: loading-1 2s infinite;
}
.loader .loader-inner-1{
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
.loader .loader-inner-2{
width: 70px;
height: 70px;
top: 40px;
left: 40px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader-inner-3{
width: 90px;
height: 90px;
top: 30px;
left: 30px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loader .loader-inner-4{
width: 110px;
height: 110px;
top: 20px;
left: 20px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loading-1{
50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
}
@keyframes loading-1{
50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *