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

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

Демонстрация эффекта загрузки страницы — стиль 50

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

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner1"></div>
<div class="loader-inner2"></div>
<div class="loader-inner3"></div>
<div class="loader-inner4"></div>
<div class="loader-inner5"></div>
<div class="loader-inner6"></div>
</div>
</div>
</div>
</div>

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

.loader {
width: 200px;
height: 200px;
text-align: center;
margin: 20px auto;
position: relative;
}
.loader-inner1 {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #f794c2;
-webkit-animation: loading3 3s infinite;
animation: loading3 3s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.loader-inner2 {
margin-left: 20px;
margin-top: 20px;
position: absolute;
width: 160px;
height: 160px;
border: 5px solid #f794c2;
-webkit-animation: loading2 3s infinite;
animation: loading2 3s infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.loader-inner3 {
margin-left: 40px;
margin-top: 40px;
position: absolute;
width: 120px;
height: 120px;
border: 5px solid #f794c2;
-webkit-animation: loading 3s infinite;
animation: loading 3s infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.loader-inner4 {
margin-left: 60px;
margin-top: 60px;
position: absolute;
width: 80px;
height: 80px;
border: 5px solid #f794c2;
-webkit-animation: loading4 3s infinite;
animation: loading4 3s infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.loader-inner5 {
margin-left: 80px;
margin-top: 80px;
position: absolute;
width: 40px;
height: 40px;
border: 5px solid #f794c2;
-webkit-animation: loading5 3s infinite;
animation: loading5 3s infinite;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.loader-inner6 {
margin-left: 95px;
margin-top: 95px;
width: 10px;
height: 10px;
background: #f794c2;
position: absolute;
animation: 3s ease-in-out 0s normal none infinite running loading6;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loading2 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading2 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@-webkit-keyframes loading3 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading3 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes loading4 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(450deg);
-ms-transform: rotate(450deg);
transform: rotate(450deg);
}
100% {
-webkit-transform: rotate(450deg);
-ms-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@keyframes loading4 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(450deg);
-ms-transform: rotate(450deg);
transform: rotate(450deg);
}
100% {
-webkit-transform: rotate(450deg);
-ms-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@-webkit-keyframes loading5 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(540deg);
-ms-transform: rotate(540deg);
transform: rotate(540deg);
}
100% {
-webkit-transform: rotate(540deg);
-ms-transform: rotate(540deg);
transform: rotate(540deg);
}
}
@keyframes loading5 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(540deg);
-ms-transform: rotate(540deg);
transform: rotate(540deg);
}
100% {
-webkit-transform: rotate(540deg);
-ms-transform: rotate(540deg);
transform: rotate(540deg);
}
}
@-webkit-keyframes loading6 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(630deg);
-ms-transform: rotate(630deg);
transform: rotate(630deg);
}
100% {
-webkit-transform: rotate(630deg);
-ms-transform: rotate(630deg);
transform: rotate(630deg);
}
}
@keyframes loading6 {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-webkit-transform: rotate(630deg);
-ms-transform: rotate(630deg);
transform: rotate(630deg);
}
100% {
-webkit-transform: rotate(630deg);
-ms-transform: rotate(630deg);
transform: rotate(630deg);
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *