CSS Loader
В редакторе
CSS Loader
Brain_Script
1436
2021-04-21 16:39:03
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 97vh;
}
.boxes {
margin: auto;
width: 250px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.boxes .box {
margin: 16.66667px;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(130deg, #ce9ffc 0%, #7367f0 100%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-animation: pulse 1s linear infinite alternate;
animation: pulse 1s linear infinite alternate;
}
.boxes .box:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.boxes .box:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.boxes .box:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.boxes .box:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.boxes .box:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.boxes .box:nth-child(6) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.boxes .box:nth-child(7) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.boxes .box:nth-child(8) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.boxes .box:nth-child(9) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
@-webkit-keyframes pulse {
from,
40% {
opacity: 0;
}
50% {
opacity: 0.5;
}
80%,
to {
opacity: 1;
}
}
@keyframes pulse {
from,
40% {
opacity: 0;
}
50% {
opacity: 0.5;
}
80%,
to {
opacity: 1;
}
}
@media screen and (max-width: 300px) {
.box {
width: 30px !important;
height: 30px !important;
}
}
Войдите для добавления комментария.