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

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

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

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

<div class="loader">
<div class="loader-inner">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
</div>

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

.loader{
width: 300px;
height: 100px;
margin: 40px auto;
position: relative;
}
.loader .loader-inner{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: loading-5 2s infinite alternate;
}
.loader .loader-inner div{
width: 100%;
height: 100%;
background: #ec5766;
position: absolute;
top: 0;
left: 0;
}
.loader .box-1{
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
animation: loading-1 2s infinite alternate;
}
.loader .box-2{
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
animation: loading-2 2s infinite alternate;
}
.loader .box-3{
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
animation: loading-3 2s infinite alternate;
}
.loader .box-4{
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
animation: loading-4 2s infinite alternate;
}
@keyframes loading-1{
0%,10%{
background: #ec5766;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
}
90%,100%{
background: #004260;
-webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
}
}
@keyframes loading-2{
0%,10%{
background: #ec5766;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
}
90%,100%{
background: #004260;
-webkit-clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
}
}
@keyframes loading-3{
0%,10%{
background: #ec5766;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}
90%,100%{
background: #004260;
-webkit-clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
}
}
@keyframes loading-4{
0%,10%{
background: #ec5766;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
}
90%,100%{
background: #004260;
-webkit-clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
}
}
@keyframes loading-5{
0%,10%{
width: 100px;
height: 100px;
}
90%,100%{
width: 250px;
height: 60px;
}
}



Теги:
0

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

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