File size: 1,371 Bytes
ded211a 831e55c ded211a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.spinner-wrapper {
height: 5rem;
width: 5rem;
position: relative;
animation: spinner 2.5s infinite linear both;
}
@keyframes spinner {
100% {
transform: rotate(-360deg);
}
}
.spinner-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: spinner-dot 1.5s infinite ease-in-out both;
border-radius: 100%;
}
.spinner-dot:before {
content: "";
display: block;
width: 25%;
height: 25%;
background-color: rgb(74, 86, 194); /* Use a CSS variable for the color */
border-radius: 100%;
animation: spinner-dot-before 1.5s infinite ease-in-out both;
}
.spinner-dot:nth-child(1) {
animation-delay: -1s; /* Adjusted for smooth start */
}
.spinner-dot:nth-child(2) {
animation-delay: -.9s; /* Slightly less delay */
}
.spinner-dot:nth-child(3) {
animation-delay: -.7s; /* Medium delay */
}
.spinner-dot:nth-child(4) {
animation-delay: -0.6s; /* Shorter delay */
}
.spinner-dot:nth-child(5) {
animation-delay: -0.5s; /* Even shorter delay */
}
.spinner-dot:nth-child(6) {
animation-delay: -0.3s; /* Quickest delay */
}
@keyframes spinner-dot {
80%,
100% {
transform: rotate(360deg);
}
}
@keyframes spinner-dot-before {
50% {
transform: scale(0.2);
}
100%,
0% {
transform: scale(.6);
}
}
|