Подробное описание и демонстрацией работы эффекта загрузки под номером №205 для бибилиотеки Bootstrap. Html и CSS код для реализации preloader’a сайта как на изображении.
Демонстрация эффекта загрузки страницы — стиль 205
<div class="demo"> <div class="loader"></div> </div>css разметка для реализации эффекта загрузки тсраницы
.demo{background-color: #00272B;}
.loader{
color: #E0FF4F;
background-color: #E0FF4F;
width: 95px;
height: 95px;
margin: 50px auto;
border-radius: 50%;
border:0 solid;
display: flex;
flex-direction: column;
animation: fill linear 3s infinite, load linear 3s infinite;
}
@keyframes load{
0%{ box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, 0 0 22px -3px;
}
9%{ box-shadow: 0 0 22px -3px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
18%{box-shadow: 0 -70px 1px -41px, 0 0 22px -3px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
27%{box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 0 0 22px -3px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
36%{box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 0 0 22px -3px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
45%{box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
0 0 22px -3px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
55%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 0 0 22px -3px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
64%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 0 22px -3px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
73%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, 0 0 22px -3px,
-60px 35px 1px -41px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
82%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
0 0 22px -3px, -70px 0 1px -41px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
91%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, 0 0 22px -3px, -60px -35px 1px -41px, -35px -60px 1px -41px;
}
100%{
box-shadow: 0 -70px 1px -41px, 35px -60px 1px -41px, 60px -35px 1px -41px, 70px 0 1px -41px,
60px 35px 1px -41px, 35px 60px 1px -41px, 0 70px 1px -41px, -35px 60px 1px -41px,
-60px 35px 1px -41px, -70px 0 1px -41px, 0 0 22px -3px, -35px -60px 1px -41px;
}
}
@keyframes fill{
0%{ transform: rotateZ(0deg); }
100%{ transform: rotateZ(30deg); }
}