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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner-1"><i></i><i></i><i></i></div>
<div class="loader-inner-2"><i></i><i></i><i></i></div>
<div class="loader-inner-3"><i></i><i></i><i></i></div>
<div class="loader-inner-4"><i></i><i></i><i></i></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 100px;
height: 100px;
position: relative;
margin: 40px auto;
}
.loader > div{
height: 100px;
opacity: 0;
position: absolute;
}
.loader .loader-inner-1{
animation: loading5 4s steps(1) infinite;
}
.loader .loader-inner-1 i{
display: inline-block;
width: 50px;
height: 100px;
background: #ff7839;
border-radius: 100% 0 0 100%/50% 0 0 50%;
}
.loader .loader-inner-1 i:nth-child(2),
.loader .loader-inner-1 i:nth-child(3){
border-radius:0 100% 100% 0/0 50% 50% 0;
transform-origin: left center;
animation: loading1 4s infinite;
}
.loader .loader-inner-1 i:nth-child(2){
background: #00d6d2;
}
.loader .loader-inner-1 i:nth-child(3){
backface-visibility: hidden;
position: absolute;
right: 0;
}
.loader .loader-inner-2{
font-size: 0;
width: 50px;
animation: loading5 4s steps(1) 1s infinite;
}
.loader .loader-inner-2 i{
display:inline-block;
width: 50px;
height: 50px;
background: #00d6d2;
border-radius: 0 0 0 100%;
}
.loader .loader-inner-2 i:nth-child(1),
.loader .loader-inner-2 i:nth-child(2){
border-radius: 100% 0 0 0;
transform-origin: left bottom;
animation: loading2 4s infinite;
}
.loader .loader-inner-2 i:nth-child(1){
background: #50514f;
}
.loader .loader-inner-2 i:nth-child(2){
backface-visibility: hidden;
position: absolute;
left: 0;
}
.loader .loader-inner-3{
width: 50px;
font-size: 0;
top: 50px;
animation: loading5 4s steps(1) 2s infinite;
}
.loader .loader-inner-3 i{
display: inline-block;
width: 50px;
height: 50px;
background: #da0018;
border-radius: 0 0 0 100%;
}
.loader .loader-inner-3 i:nth-child(3){
background: #50514f;
backface-visibility: hidden;
}
.loader .loader-inner-3 i:nth-child(2),
.loader .loader-inner-3 i:nth-child(3){
position: absolute;
left: 0;
transform-origin: right center;
animation: loading3 4s infinite;
}
.loader .loader-inner-4{
width: 100px;
font-size: 0;
top: 50px;
animation: loading5 4s steps(1) 3s infinite;
}
.loader .loader-inner-4 i{
display: inline-block;
width: 100px;
height: 50px;
background: #ff7839;
border-radius: 0 0 50px 50px;
}
.loader .loader-inner-4 i:nth-child(3){
background: #da0018;
backface-visibility: hidden;
}
.loader .loader-inner-4 i:nth-child(2),
.loader .loader-inner-4 i:nth-child(3){
position: absolute;
left: 0;
transform-origin: center top;
animation: loading4 4s infinite;
}
@keyframes loading1{
25%,100%{
transform:rotateY(180deg);
}
}
@keyframes loading2{
25%{
transform:rotateX(0deg);
}
50%,100%{
transform:rotateX(180deg);
}
}
@keyframes loading3{
50%{
transform:rotateY(0deg);
}
75%,100%{
transform:rotateY(180deg);
}
}
@keyframes loading4{
75%{
transform:rotateX(0deg);
}
100%{
transform:rotateX(180deg);
}
}
@keyframes loading5{
0%{
opacity:1;
}
25%{
opacity:0;
}
}

Теги: