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

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

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader"></div>
</div>
</div>
</div>

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

.loader{
width: 40px;
height: 40px;
border:1px  rgba(255,255,255,1) solid;
margin: 36px auto;
position: relative;
-webkit-animation: fill_color 5s linear infinite;
-moz-animation: fill_color 5s linear infinite;
animation: fill_color 5s linear infinite;
}
.loader:after{
width: 4px;
height: 4px;
position: absolute;
content: "";
background-color: rgba(255,255,255,1);
top: -8px;
left: 0px;
-webkit-animation: square_check 1s ease-in-out infinite;
-moz-animation: square_check 1s ease-in-out infinite;
animation: square_check 1s ease-in-out infinite;
}
@-webkit-keyframes square_check{
25%{ left: 22px; top: -8px;}
50%{ left: 22px; top: 22px;}
75%{ left: -9px; top: 22px;}
100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
25%{ left: 22px; top: -8px;}
50%{ left: 22px; top: 22px;}
75%{ left: -9px; top: 22px;}
100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
25%{ left: 42px; top: -8px;}
50%{ left: 42px; top: 42px;}
75%{ left: -9px; top: 42px;}
100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
100%{ box-shadow: inset 0px -40px 0px 0px rgba(255,255,255,1);}
}
@-moz-keyframes fill_color{
0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
100%{ box-shadow: inset 0px -40px 0px 0px rgba(255,255,255,1);}
}
@keyframes fill_color{
0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
100%{ box-shadow: inset 0px -40px 0px 0px rgba(255,255,255,1);}
}

Теги: