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

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

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

<div class="demo">
<div class="loader"></div>
</div>

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

.demo{ background: #333; }
.loader{
width:  100px;
height: 100px;
margin: 50px auto;
position: relative;
}
.loader:before{
content: "";
width: 6rem;
height: 6rem;
border-radius: 50%;
border: 0.2rem solid #cec000;
background: linear-gradient(to bottom, #fffec7 0%, #cec000 25%, #cec000 100%);
margin: -3rem 0 0 -3rem;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
animation: loading-1 .8s linear infinite;
}
.loader:after{
content: "";
width: 4rem;
height: .5rem;
border-radius: 50%;
background: #000;
position: absolute;
top: 50%;
left: 50%;
opacity: .75;
margin: 3rem 0 0 -1.8rem;
-webkit-filter: blur(6px);
filter: blur(6px);
animation: loading-2 .8s linear infinite;
}
@keyframes loading-1{
0%,100%{
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
45%{
-webkit-transform: translateY(-3rem);
transform: translateY(-3rem);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes loading-2{
0%,100%{
-webkit-transform: scale(1);
transform: scale(1);
}
45%{
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: .5;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}

Теги: