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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
<div class="loader-inner"></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 200px;
height: 200px;
margin: 30px auto;
position: relative;
}
.loader .loader-inner{
width: 100px;
height: 100px;
border-radius: 50%;
border: 20px solid #032023;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
transform-style: perserve-3d;
transform: scale(0) rotateX(60deg);
animation: loading-1 3s cubic-bezier(.67,.08,.46,1.5) infinite;
}
.loader .loader-inner:nth-child(2){ animation-delay: 200ms; }
.loader .loader-inner:nth-child(3){ animation-delay: 400ms; }
.loader .loader-inner:nth-child(4){ animation-delay: 600ms; }
.loader .loader-inner:nth-child(5){ animation-delay: 800ms; }
.loader .loader-inner:nth-child(6){ animation-delay: 1000ms; }
.loader .loader-inner:nth-child(7){ animation-delay: 1200ms; }
.loader .loader-inner:nth-child(8){ animation-delay: 1400ms; }
@-webkit-keyframes loading-1{
0%{
opacity: 0;
border-color: #857b01;
transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);
}
40%{
opacity: 1;
transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);
}
100%{
opacity: 0;
transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);
}
}
@keyframes loading-1{
0%{
opacity: 0;
border-color: #857b01;
transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);
}
40%{
opacity: 1;
transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);
}
100%{
opacity: 0;
transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);
}
}

Теги: