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

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

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

.loader{
height: 24px;
margin: 70px auto;
position: relative;
}
.loader .loader-inner{
width: 24px;
height: 24px;
border-radius: 50%;
background: #3626a7;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
}
.loader .loader-inner:first-child{
margin-left: -52px;
}
.loader .loader-inner:last-child{
margin-left: 28px;
}
.loader .loader-inner:before{
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
.loader .loader-inner:nth-child(1){
-webkit-animation: loading-1 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-1 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.loader .loader-inner:nth-child(1):before{
-webkit-animation: loading-2 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-2 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.loader .loader-inner:nth-child(2){
-webkit-animation: loading-3 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-3 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.loader .loader-inner:nth-child(2):before{
-webkit-animation: loading-4 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-4 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.loader .loader-inner:nth-child(3){
-webkit-animation: loading-5 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-5 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.loader .loader-inner:nth-child(3):before{
-webkit-animation: loading-6 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: loading-6 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
@-webkit-keyframes loading-1{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loading-1{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes loading-2{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes loading-2{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@-webkit-keyframes loading-3{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loading-3{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes loading-4{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes loading-4{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@-webkit-keyframes loading-5{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
75% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loading-5{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
75% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes loading-6{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes loading-6{
0%, 25%, 50%, 75%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}

Теги: