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

Подробное описание и демонстрацией работы эффекта загрузки под номером №154 для бибилиотеки 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>
</div>
</div>
</div>

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

.loader{
width: 200px;
height: 90px;
margin: 60px auto;
position: relative;
}
.loader .loader-inner{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
margin-top: 22%;
margin-left: 50%;
transform: translate(-50%, -50%);
}
.loader .loader-inner:before{
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
box-shadow: 0 0 0 3px #1c5770, 0 0 0 17px #03b5aa,-3px -3px 0 #1c5770 inset;
position: absolute;
left: 0;
z-index: 1;
}
.loader .loader-inner:after{
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffb03b;
box-shadow:-7px -7px 0 #cc8c2c inset;
position: absolute;
top: 10px;
left: 80px;
z-index: -1;
-webkit-animation: loading-1 3s linear infinite;
animation: loading-1 3s linear infinite;
}
@-webkit-keyframes loading-1{
0% {width:30px;height:30px;left:15px;z-index:10;}
13% {width:40px;height:40px;}
22% {left:-56px;}
23% {left:-57px;}
24% {width:30px;height:30px;z-index:10;}
25% {left:-60px;z-index: -10;}
27% {left:-57px;}
28% {left:-56px;}
38% {width:20px;height:20px;}
49% {width:30px;height:30px;z-index:-10;}
50% {left:15px;z-index: 10;}
64% {width:40px;height:40px;}
72% {left:86px;}
73% {left:87px;}
74% {z-index:10;}
75% {width:30px;height:30px;left:90px;z-index:-10;}
77% {left:87px}
78% {left:86px}
89% {width:20px;height:20px;}
99% {z-index:-10;}
100% {width:30px;height:30px;left:15px;z-index:10;}
}
@keyframes loading-1{
0% {width:30px;height:30px;left:15px;z-index:10;}
13% {width:40px;height:40px;}
22% {left:-56px;}
23% {left:-57px;}
24% {width:30px;height:30px;z-index:10;}
25% {left:-60px;z-index: -10;}
27% {left:-57px;}
28% {left:-56px;}
38% {width:20px;height:20px;}
49% {width:30px;height:30px;z-index:-10;}
50% {left:15px;z-index: 10;}
64% {width:40px;height:40px;}
72% {left:86px;}
73% {left:87px;}
74% {z-index:10;}
75% {width:30px;height:30px;left:90px;z-index:-10;}
77% {left:87px}
78% {left:86px}
89% {width:20px;height:20px;}
99% {z-index:-10;}
100% {width:30px;height:30px;left:15px;z-index:10;}
}

Теги: