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

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

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

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

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

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

.loader{
width: 100px;
height: 130px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
width: 60px;
height: 60px;
border-radius: 50% 0 50% 50%;
box-shadow: 0 0 0 4px #0a6f6d, 0 0 0 8px #14b0ad, -3px -3px 3px 8px rgba(0, 0, 0, 0.25);
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: rotate(135deg);
}
.loader .loader-inner:before{
content: "";
display: block;
border-radius: 50% 0 50% 50%;
background-image: repeating-linear-gradient(45deg, #086a69 0, #086a69 9px, transparent 10px, transparent 19px);
background-position: center center;
background-size: 100% 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
animation: loading-1 1s cubic-bezier(0.3, 0.1, 0.3, 0.85) infinite;
}
.loader .loader-inner:after{
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: #086a69;
box-shadow: inset -0 -4px 0 #14b0ad, -3px -3px 3px rgba(0, 0, 0, 0.25);
position: absolute;
bottom: 90%;
left: 90%;
z-index: -2;
animation: loading-2 3s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite forwards;
}
@keyframes loading-1{
from{ background-size: 200% 200%; }
to{ background-size: 141% 141%; }
}
@keyframes loading-2{
0%{
width: 1px;
height: 1px;
border-radius: 50px;
opacity: 1;
bottom: 105%;
left: 105%;
}
70%{
width: 16px;
height: 16px;
border-radius: 96px 96px 96px 0;
opacity: 1;
bottom: 120%;
left: 120%;
}
80%{
border-radius: 48px 96px;
opacity: 1;
bottom: 130%;
left: 130%;
}
94%{
border-radius: 32px 96px;
opacity: 1;
bottom: 150%;
left: 150%;
}
100%{
border-radius: 8px 96px;
opacity: 0;
bottom: 150%;
left: 150%;
}
}



Теги:
0

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

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