Подробное описание и демонстрацией работы эффекта загрузки под номером №94 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 94
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="loader-inner2"> <div class="box"></div> </div> <div class="loader-inner2"> <div class="box"></div> </div> </div> </div> </div> </div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{ background: #4b4673; }
.loader{
width: 300px;
height: 120px;
margin: 60px auto;
position: relative;
}
.loader .loader-inner{
width: 180px;
height: 60px;
margin: -30px -90px;
position: absolute;
top: 50%;
left: 50%;
}
.loader .box{
width: 12px;
height: 12px;
border-radius: 50%;
background: #2ecc71;
box-shadow: 0 0 2px #000;
margin: -6px -6px;
position: absolute;
top: 50%;
left: 0;
}
.loader .loader-inner2{
width: 120px;
height: 120px;
border-radius: 50%;
position: absolute;
-webkit-animation: loading-1 4s infinite linear;
animation: loading-1 4s infinite linear;
}
.loader .loader-inner2 .box{
-webkit-animation: loading-7 4s infinite linear;
animation: loading-7 4s infinite linear;
}
.loader .loader-inner2:last-child{
right: 0;
-webkit-animation: loading-2 4s infinite linear;
animation: loading-2 4s infinite linear;
}
.loader .loader-inner2:last-child .box{
left: 100%;
}
.loader .loader-inner .box:nth-child(1){
left: 0;
background: #ff3033;
-webkit-animation: loading-3 4s infinite linear;
animation: loading-3 4s infinite linear;
}
.loader .loader-inner .box:nth-child(2){
left: 33.33333%;
background: #ffd500;
-webkit-animation: loading-4 4s infinite linear;
animation: loading-4 4s infinite linear;
}
.loader .loader-inner .box:nth-child(3){
left: 66.66667%;
background: #ffd500;
-webkit-animation: loading-5 4s infinite linear;
animation: loading-5 4s infinite linear;
}
.loader .loader-inner .box:nth-child(4){
left: 100%;
background: #ff3033;
-webkit-animation: loading-6 4s infinite linear;
animation: loading-6 4s infinite linear;
}
@-webkit-keyframes loading-1{
20% {
-webkit-transform: translate(0, 0) rotate(-0.5turn);
-ms-transform: translate(0, 0) rotate(-0.5turn);
transform: translate(0, 0) rotate(-0.5turn);
}
20.00001% {
-webkit-transform: translate(120px, 0) rotate(0);
-ms-transform: translate(120px, 0) rotate(0);
transform: translate(120px, 0) rotate(0);
}
40% {
-webkit-transform: translate(120px, 0) rotate(0.5turn);
-ms-transform: translate(120px, 0) rotate(0.5turn);
transform: translate(120px, 0) rotate(0.5turn);
}
40.00001% {
-webkit-transform: translate(240px, 0) rotate(0);
-ms-transform: translate(240px, 0) rotate(0);
transform: translate(240px, 0) rotate(0);
}
60% {
-webkit-transform: translate(240px, 0) rotate(-1turn);
-ms-transform: translate(240px, 0) rotate(-1turn);
transform: translate(240px, 0) rotate(-1turn);
}
60.00001% {
-webkit-transform: translate(120px, 0) rotate(-0.5turn);
-ms-transform: translate(120px, 0) rotate(-0.5turn);
transform: translate(120px, 0) rotate(-0.5turn);
}
80% {
-webkit-transform: translate(120px, 0) rotate(0);
-ms-transform: translate(120px, 0) rotate(0);
transform: translate(120px, 0) rotate(0);
}
80.00001% {
-webkit-transform: translate(0, 0) rotate(0.5turn);
-ms-transform: translate(0, 0) rotate(0.5turn);
transform: translate(0, 0) rotate(0.5turn);
}
100% {
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-1{
20% {
-webkit-transform: translate(0, 0) rotate(-0.5turn);
-ms-transform: translate(0, 0) rotate(-0.5turn);
transform: translate(0, 0) rotate(-0.5turn);
}
20.00001% {
-webkit-transform: translate(120px, 0) rotate(0);
-ms-transform: translate(120px, 0) rotate(0);
transform: translate(120px, 0) rotate(0);
}
40% {
-webkit-transform: translate(120px, 0) rotate(0.5turn);
-ms-transform: translate(120px, 0) rotate(0.5turn);
transform: translate(120px, 0) rotate(0.5turn);
}
40.00001% {
-webkit-transform: translate(240px, 0) rotate(0);
-ms-transform: translate(240px, 0) rotate(0);
transform: translate(240px, 0) rotate(0);
}
60% {
-webkit-transform: translate(240px, 0) rotate(-1turn);
-ms-transform: translate(240px, 0) rotate(-1turn);
transform: translate(240px, 0) rotate(-1turn);
}
60.00001% {
-webkit-transform: translate(120px, 0) rotate(-0.5turn);
-ms-transform: translate(120px, 0) rotate(-0.5turn);
transform: translate(120px, 0) rotate(-0.5turn);
}
80% {
-webkit-transform: translate(120px, 0) rotate(0);
-ms-transform: translate(120px, 0) rotate(0);
transform: translate(120px, 0) rotate(0);
}
80.00001% {
-webkit-transform: translate(0, 0) rotate(0.5turn);
-ms-transform: translate(0, 0) rotate(0.5turn);
transform: translate(0, 0) rotate(0.5turn);
}
100% {
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-2{
20% {
-webkit-transform: translate(0, 0) rotate(-0.5turn);
-ms-transform: translate(0, 0) rotate(-0.5turn);
transform: translate(0, 0) rotate(-0.5turn);
}
20.00001% {
-webkit-transform: translate(-120px, 0) rotate(0);
-ms-transform: translate(-120px, 0) rotate(0);
transform: translate(-120px, 0) rotate(0);
}
40% {
-webkit-transform: translate(-120px, 0) rotate(0.5turn);
-ms-transform: translate(-120px, 0) rotate(0.5turn);
transform: translate(-120px, 0) rotate(0.5turn);
}
40.00001% {
-webkit-transform: translate(-240px, 0) rotate(0);
-ms-transform: translate(-240px, 0) rotate(0);
transform: translate(-240px, 0) rotate(0);
}
60% {
-webkit-transform: translate(-240px, 0) rotate(-1turn);
-ms-transform: translate(-240px, 0) rotate(-1turn);
transform: translate(-240px, 0) rotate(-1turn);
}
60.00001% {
-webkit-transform: translate(-120px, 0) rotate(-0.5turn);
-ms-transform: translate(-120px, 0) rotate(-0.5turn);
transform: translate(-120px, 0) rotate(-0.5turn);
}
80% {
-webkit-transform: translate(-120px, 0) rotate(0);
-ms-transform: translate(-120px, 0) rotate(0);
transform: translate(-120px, 0) rotate(0);
}
80.00001% {
-webkit-transform: translate(0, 0) rotate(0.5turn);
-ms-transform: translate(0, 0) rotate(0.5turn);
transform: translate(0, 0) rotate(0.5turn);
}
100% {
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-2{
20% {
-webkit-transform: translate(0, 0) rotate(-0.5turn);
-ms-transform: translate(0, 0) rotate(-0.5turn);
transform: translate(0, 0) rotate(-0.5turn);
}
20.00001% {
-webkit-transform: translate(-120px, 0) rotate(0);
-ms-transform: translate(-120px, 0) rotate(0);
transform: translate(-120px, 0) rotate(0);
}
40% {
-webkit-transform: translate(-120px, 0) rotate(0.5turn);
-ms-transform: translate(-120px, 0) rotate(0.5turn);
transform: translate(-120px, 0) rotate(0.5turn);
}
40.00001% {
-webkit-transform: translate(-240px, 0) rotate(0);
-ms-transform: translate(-240px, 0) rotate(0);
transform: translate(-240px, 0) rotate(0);
}
60% {
-webkit-transform: translate(-240px, 0) rotate(-1turn);
-ms-transform: translate(-240px, 0) rotate(-1turn);
transform: translate(-240px, 0) rotate(-1turn);
}
60.00001% {
-webkit-transform: translate(-120px, 0) rotate(-0.5turn);
-ms-transform: translate(-120px, 0) rotate(-0.5turn);
transform: translate(-120px, 0) rotate(-0.5turn);
}
80% {
-webkit-transform: translate(-120px, 0) rotate(0);
-ms-transform: translate(-120px, 0) rotate(0);
transform: translate(-120px, 0) rotate(0);
}
80.00001% {
-webkit-transform: translate(0, 0) rotate(0.5turn);
-ms-transform: translate(0, 0) rotate(0.5turn);
transform: translate(0, 0) rotate(0.5turn);
}
100% {
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-3{
0%, 39% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
40% {
background:#ff3033;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
45%, 59% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
60% {
background:#ffd500;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
65% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-3{
0%, 39% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
40% {
background:#ff3033;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
45%, 59% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
60% {
background:#ffd500;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
65% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-4{
0%, 19% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
20% {
background:#2ecc71;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
25%, 79% {
background:#2ecc71;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
80% {
background:#ff3033;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
85% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-4{
0%, 19% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
20% {
background:#2ecc71;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
25%, 79% {
background:#2ecc71;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
80% {
background:#ff3033;
-webkit-transform: translate(0, -5px) rotate(0);
-ms-transform: translate(0, -5px) rotate(0);
transform: translate(0, -5px) rotate(0);
}
85% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-5{
0%, 19% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
20% {
background:#2ecc71;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
25%, 79% {
background:#2ecc71;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
80% {
background: #ff3033;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
85% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-5{
0%, 19% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
20% {
background:#2ecc71;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
25%, 79% {
background:#2ecc71;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
80% {
background: #ff3033;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
85% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-6{
0%, 39% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
40% {
background:#ff3033;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
45%, 59% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
60% {
background:#ffd500;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
65% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@keyframes loading-6{
0%, 39% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
40% {
background:#ff3033;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
45%, 59% {
background:#ff3033;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
60% {
background:#ffd500;
-webkit-transform: translate(0, 5px) rotate(0);
-ms-transform: translate(0, 5px) rotate(0);
transform: translate(0, 5px) rotate(0);
}
65% {
background:#ffd500;
-webkit-transform: translate(0, 0) rotate(0);
-ms-transform: translate(0, 0) rotate(0);
transform: translate(0, 0) rotate(0);
}
}
@-webkit-keyframes loading-7{
0%, 19% {
background:#2ecc71;
}
20%, 39% {
background:#ff3033;
}
40%, 59% {
background: #ffd500;
}
60%, 79% {
background: #ff3033;
}
80% {
background:#2ecc71;
}
}
@keyframes loading-7{
0%, 19% {
background:#2ecc71;
}
20%, 39% {
background:#ff3033;
}
40%, 59% {
background: #ffd500;
}
60%, 79% {
background: #ff3033;
}
80% {
background:#2ecc71;
}
}