.loaderWrapper-particle {
    display: flex;
    justify-content: center;
}

.loader-container.loader-particle {
    width: var(--block-size);
    height: var(--block-size);
    justify-content: center;
}

.loader-particle .loader {
    --light-color: rgba(255, 255, 255, 0.3);

    width: var(--loader-size);
    color: white;
}

.loader-particle .loader {
    --loader-size: calc(var(--block-size) / 6);
    --anim-duration: 0.6s;

    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: white;
    animation: loader-particle-rotation calc(var(--anim-duration) * 6) linear infinite;
}

/* Small Dots */
.loader-particle .loader::before,
.loader-particle .loader::after {
    width: var(--dot-size);
    aspect-ratio: 1 / 1;
    background: white;
    border-radius: 50%;
    animation: loader-particle-dots var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader-particle .loader::before {
    --x-dist: 0;
    --y-dist: var(--loader-size-half);
    bottom: calc(100% + var(--loader-size));
    left: calc(50% - var(--dot-size-half));
    transform-origin: center var(--loader-size);
}

.loader-particle .loader::after {
    --x-dist: var(--loader-size-half);
    --y-dist: 22px;
    top: calc(50% - var(--dot-size-half));
    right: calc(100% + var(--loader-size));
    transform-origin: var(--loader-size) center;
    animation-delay: calc(var(--anim-duration) / 2 * -1);
}

@keyframes loader-particle-rotation {

    0% {
        box-shadow: 0 0 var(--loader-size) white;
    }

    50% {
        box-shadow: 0 0 50px white;
    }

    100% {
        transform: rotate(1turn);
        box-shadow: 0 0 var(--loader-size) white;
    }
}

@keyframes loader-particle-dots {
    0%, 100% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    0% {
        transform: scale(1.1);
    }

    88% {
        transform: rotate(180deg) translate(var(--x-dist), var(--y-dist));
    }
}