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

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

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

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

<div class="loader">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner">
<div class="loader-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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

.loader{ overflow: hidden; }
.loader .loader-inner{
width: 260px;
height: 260px;
background: #77379a;
border-radius: 100% 0 100% 0;
padding: 15px;
margin: 64px auto;
box-sizing: border-box;
position: relative;
animation: loading-1 10s linear forwards infinite;
}
.loader .loader-inner:before{
content: "";
background: #fff;
border-radius: 0 100% 0 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader .loader-inner > .loader-inner{
width: 100%;
height: 100%;
margin: 0;
}
@keyframes loading-1{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}



Теги:
0

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

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