@eviljs/reactx/spinner-v4/spinner.css

Awesome React UI Widgets

.Spinner-9fef {
    position: relative;
    display: inline-block;
    width: var(--Spinner-size, var(--icon-size, 1em));
    height: var(--Spinner-size, var(--icon-size, 1em));
    opacity: 0;
}

.Spinner-9fef[data-active="true"] {
    opacity: 1;
    animation: spinner-9fef 2.5s infinite linear;
}

.Spinner-9fef[data-active="true"] .dot-b05e,
.Spinner-9fef[data-active="true"] .dot-b05e::before {
    animation-name: spinner-9fef-dot;
    animation-duration: 2.0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.dot-b05e {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dot-b05e::before {
    content: '';
    display: block;
    width: 16%;
    height: 16%;
    border-radius: 100%;
    background-color: var(--color, currentColor);
}

.dot-b05e:nth-child(1) { animation-delay: -1.1s; }
.dot-b05e:nth-child(2) { animation-delay: -1.0s; }
.dot-b05e:nth-child(3) { animation-delay: -0.9s; }
.dot-b05e:nth-child(4) { animation-delay: -0.8s; }
.dot-b05e:nth-child(5) { animation-delay: -0.7s; }
.dot-b05e:nth-child(6) { animation-delay: -0.6s; }
.dot-b05e:nth-child(1)::before { animation-delay: -1.1s; }
.dot-b05e:nth-child(2)::before { animation-delay: -1.0s; }
.dot-b05e:nth-child(3)::before { animation-delay: -0.9s; }
.dot-b05e:nth-child(4)::before { animation-delay: -0.8s; }
.dot-b05e:nth-child(5)::before { animation-delay: -0.7s; }
.dot-b05e:nth-child(6)::before { animation-delay: -0.6s; }

@keyframes spinner-9fef {
    100% { transform: rotate(360deg); }
}

@keyframes spinner-9fef-dot {
    80%, 100% { transform: rotate(360deg); }
}

@keyframes spinner-9fef-dot-before {
    50% { transform: scale(0.4); }
    0%, 100% { transform: scale(1.0); }
}