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

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

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

<div class="demo">
<div class="loader">
<div class="loader-inner box-1"></div>
<div class="loader-inner box-2"></div>
<div class="loader-inner box-3"></div>
<div class="loader-inner box-4"></div>
<div class="loader-inner box-5"></div>
<div class="loader-inner box-6"></div>
<div class="loader-inner box-7"></div>
<div class="loader-inner box-8"></div>
<div class="loader-inner box-9"></div>
<div class="loader-inner box-10"></div>
<div class="loader-inner box-11"></div>
<div class="loader-inner box-12"></div>
</div>
</div>

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

.demo{ background: #26225c; }
.loader{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.loader .loader-inner{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader .loader-inner:before{
content: "";
display: block;
width: 15%;
height: 25%;
border-radius: 100%;
background: #e6c510;
margin: 0 auto;
animation: loading-1 1.2s infinite ease-in-out both;
}
.loader .box-2{ transform: rotate(30deg); }
.loader .box-3{ transform: rotate(60deg); }
.loader .box-4{ transform: rotate(90deg); }
.loader .box-5{ transform: rotate(120deg); }
.loader .box-6{ transform: rotate(150deg); }
.loader .box-7{ transform: rotate(180deg); }
.loader .box-8{ transform: rotate(210deg); }
.loader .box-9{ transform: rotate(240deg); }
.loader .box-10{ transform: rotate(270deg); }
.loader .box-11{ transform: rotate(300deg); }
.loader .box-12{ transform: rotate(330deg); }
.loader .box-2:before{ animation-delay: -1.1s; }
.loader .box-3:before{ animation-delay: -1s; }
.loader .box-4:before{ animation-delay: -0.9s; }
.loader .box-5:before{ animation-delay: -0.8s; }
.loader .box-6:before{ animation-delay: -0.7s; }
.loader .box-7:before{ animation-delay: -0.6s; }
.loader .box-8:before{ animation-delay: -0.5s; }
.loader .box-9:before{ animation-delay: -0.4s; }
.loader .box-10:before{ animation-delay: -0.3s; }
.loader .box-11:before{ animation-delay: -0.2s; }
.loader .box-12:before{ animation-delay: -0.1s; }
@keyframes loading-1{
0%, 39%, 100%{ opacity: 0; }
40%{ opacity: 1; }
}

Теги: