.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);
    }
}