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

Подробное описание и демонстрацией работы эффекта загрузки под номером №90 для бибилиотеки 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 box-1 box-red"></div>
<div class="loader-inner-2 box-2 box-pink"></div>
<div class="loader-inner-1 box-3 box-blue"></div>
<div class="loader-inner-2 box-4 box-yellow"></div>
<div class="loader-inner-1 box-5 box-peach"></div>
<div class="loader-inner-2 box-6 box-pink"></div>
<div class="loader-inner-1 box-7 box-green"></div>
<div class="loader-inner-2 box-8 box-purple"></div>
</div>
</div>
</div>
</div>

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

.loader{
width: 100px;
height: 100px;
margin: 60px auto;
position: relative;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.loader .loader-inner-1{
width: 33.333%;
height: 33.333%;
position: absolute;
}
.loader .loader-inner-2{
position: absolute;
width: 16.6665%;
height: 16.6665%;
}
.loader .box-1{
top: 0;
left: 50%;
margin-left: -16.6665%;
-webkit-animation: loading-1 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-1 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-2{
top: 0;
left: 0;
-webkit-animation: loading-6 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-6 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-3{
top: 50%;
right: 0;
margin-top: -16.6665%;
-webkit-animation: loading-2 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-2 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-4{
top: 0;
right: 0;
-webkit-animation: loading-5 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-5 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-5{
top: 50%;
left: 0;
margin-top: -16.6665%;
-webkit-animation: loading-4 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-4 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-6{
bottom: 0;
right: 0;
-webkit-animation: loading-7 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-7 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-7{
bottom: 0;
left: 50%;
margin-left: -16.6665%;
-webkit-animation: loading-3 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-3 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-8{
bottom: 0;
left: 0;
-webkit-animation: loading-8 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
animation: loading-8 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
}
.loader .box-red{
background: #f52220;
}
.loader .box-blue{
background: #02c1c1;
}
.loader .box-green{
background: #009a3c;
}
.loader .box-peach{
background: #db5b53;
}
.loader .box-pink{
background: #e40066;
}
.loader .box-yellow{
background: #f59c00;
}
.loader .box-purple{
background: #5c0475;
}
@-webkit-keyframes loading-1{
0%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
top: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-1{
0%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
top: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-2{
0%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
right: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-2{
0% {
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25% {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50% {
right: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75% {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-3{
0%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
bottom: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-3{
0%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
bottom: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-4{
0%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
left: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-4{
0%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
50%{
left: 66.666%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-5{
0%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
top: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-5{
0%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
top: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
top: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-6{
0%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
left: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-6{
0%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
left: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
left: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-7{
0%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
right: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-7{
0%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
right: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes loading-8{
0%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
bottom: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes loading-8{
0%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
25%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
50%{
bottom: 83.3335%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
75%{
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
}
100%{
bottom: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}

Теги: