@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(0.6);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.loader {
    --looader-primary-color: var( --bs-primary );
    display: inline-flex;
    min-width: 4.6875rem;
    min-height: 4.6875rem;
    align-items: center;
    justify-content: center;
}

.ball-clip-rotate > div#ball,
.ball-clip-rotate > div#ball2,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg > div#ball,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg > div#ball2 {
    background-color: var(--looader-primary-color);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    /*margin: 2px;*/
    animation-fill-mode: both;
    border: 2px solid var(--looader-primary-color);
    border-bottom-color: transparent;
    height: 40px;
    width: 40px;
    background: transparent !important;
    display: inline-block;
    animation: rotate 0.75s 0s linear infinite;
    padding: 0;
}

.ball-clip-rotate > div#ball2,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg > div#ball2 {
    height: 20px;
    width: 20px;
    position: absolute;
    left: 62px;
    top: 10px;
    animation-direction: reverse;
}

@keyframes blinkdot {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

.loading span {
    animation-name: blinkdot;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    font-size: 20px;
}

    .loading span:nth-child(2) {
        animation-delay: .2s;
    }

    .loading span:nth-child(3) {
        animation-delay: .4s;
    }