.spinner {
    --track: var(--gray-100);
    --value: var(--primary-600);

    display: inline-block;
    height: 1em;
    width: 1em;
    flex: 0 0 1em;
    animation: spinner 5s linear infinite;
    font-size: 20px;
}

.spinnerGray {
    --value: var(--gray-500);
}

.spinnerPrimary {
    --value: var(--primary-600);
}

.spinnerDanger {
    --value: var(--danger-600);
}

.spinnerInfo {
    --value: var(--info-600);
}

.spinnerSuccess {
    --value: var(--success-600);
}

.spinnerWarning {
    --value: var(--warning-600);
}

.spinnerTrack {
    stroke: var(--track);
}

.spinnerEffect,
.spinnerValue {
    stroke: var(--value);
    transform-origin: center;
    animation: spinner 1.2s var(--swift-out) infinite;
}

.spinnerEffect {
    opacity: .25;
    animation-delay: -1.05s;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(1turn);
    }
}