catalog-ui/src/assets/styles/tlv-loader.less

.tlv-loader {
    height: 63px;
    width: 63px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.tlv-loader.small {
    transform: scale(0.26);
    margin-top: -36.5px;
    margin-left: -36.5px;
}

.tlv-loader.medium {
    transform: scale(0.5);
    margin-top: -26.5px;
    margin-left: -26.5px;
}

.tlv-loader.large {
    transform: scale(1);
    margin-top: -10.5px;
    margin-left: -10.5px;
}

.tlv-loader::before {
    background-color: #eaeaea;
    border-radius: 50%;
    box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, -21px 21px 0px 0px #eaeaea;
    content: '';
    display: block;
    height: 21px;
    width: 21px;
    position: absolute;
    left: 50%;
    margin-left: -10.5px;
}

.tlv-loader::after {
    border-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    height: 21px;
    width: 21px;
    animation: dot-move-2 4.5s infinite ease-in;
}

@keyframes dot-move {
    0% {
        background-color: #3bb2df;
        left: 21px;
        top: 0;
    }
    25% {
        background-color: #ffb81c;
        left: 42px;
        top: 21px;
    }
    50% {
        background-color: #caa2dd;
        left: 21px;
        top: 42px;
    }
    75% {
        background-color: #d9e51c;
        left: 0;
        top: 21px;
    }
    100% {
        background-color: #3bb2df;
        left: 21px;
        top: 0;
    }
}

@keyframes dot-move-2 {
    0% {
        background-color: #3bb2df;
        left: 21px;
        top: 0;
    }
    6.25% {
        background-color: #3bb2df;
        left: 42px;
        top: 21px;
    }
    12.5% {
        background-color: #3bb2df;
        left: 21px;
        top: 42px;
    }
    18.75% {
        background-color: #3bb2df;
        left: 0;
        top: 21px;
    }
    25% {
        background-color: #ffb81c;
        left: 21px;
        top: 0;
    }
    31.25% {
        background-color: #ffb81c;
        left: 42px;
        top: 21px;
    }
    37.5% {
        background-color: #ffb81c;
        left: 21px;
        top: 42px;
    }
    43.75% {
        background-color: #ffb81c;
        left: 0;
        top: 21px;
    }
    50% {
        background-color: #caa2dd;
        left: 21px;
        top: 0;
    }
    56.25% {
        background-color: #caa2dd;
        left: 42px;
        top: 21px;
    }
    62.5% {
        background-color: #caa2dd;
        left: 21px;
        top: 42px;
    }
    68.75% {
        background-color: #caa2dd;
        left: 0;
        top: 21px;
    }
    75% {
        background-color: #d9e51c;
        left: 21px;
        top: 0;
    }
    81.25% {
        background-color: #d9e51c;
        left: 42px;
        top: 21px;
    }
    87.5% {
        background-color: #d9e51c;
        left: 21px;
        top: 42px;
    }
    93.75% {
        background-color: #d9e51c;
        left: 0;
        top: 21px;
    }
    100% {
        background-color: #3bb2df;
        left: 21px;
        top: 0;
    }
}