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

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

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

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

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

.demo{ background: #4a956a; }
.loader{
width: 100px;
height: 100px;
margin: 60px auto;
position: relative;
}
.loader .loader-inner{
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 30px;
left: 50px;
z-index: 1;
animation: loading-1 2.5s infinite;
}
.loader .box{
position: relative;
animation: loading-2 2.5s infinite;
}
.loader .box-1{
width: 25px;
height: 50px;
border-radius: 40%;
background: #f0c808;
border-bottom: solid;
border-right: solid;
position: relative;
left: 56px;
z-index: 1;
transform: skewx(-30deg);
}
.loader .box-2{
width: 7px;
height: 32px;
border-radius: 20%;
background: #a52a2a;
border-bottom: solid #654321;
border-right: solid #654321;
position: relative;
top: -5px;
left: 41px;
transform: skewx(-30deg);
}
@keyframes loading-1{
34%{ transform: translate(-50px, -30px); animation-timing-function: linear; }
46%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
48%{ transform: translate(2px, 0px) skewx(-20deg); animation-timing-function: linear; }
50%{ transform: skewx(0deg); animation-timing-function: linear; }
70%{ transform: translate(-40px, -24px); }
84%{ transform: translate(-50px, -30px);  animation-timing-function: linear; }
96%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
98%{ transform: translate(2px, 0px) skewx(-20deg); animation-timing-function: linear; }
100%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
}
@keyframes loading-2{
37%{ transform: translate(10px, 8px); animation-timing-function: ease-in; }
42%{ transform: translate(10px, 8px); }
50%{ transform: translate(0px);  animation-timing-function: ease-out; }
87%{ transform: translate(10px, 8px); animation-timing-function: ease-in; }
92%{ transform: translate(10px, 8px); }
100%{ transform: translate(0px); }
}

Теги: