.base-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    height: 100%;

    &.table-loader {
        background: rgba(255, 255, 255, 0.5);
        height: calc(100% - 80px);
        top: 80px;
    }

    .spinner {
        height: 50px;
        width: 50px;
        border: 6px solid $ls-color-primary--light;
        border-top-color: $ls-color-gray--light;
        border-radius: 100%;
        animation: rotation 0.6s infinite linear 0.25s;

        /* the opacity is used to lazyload the spinner, see animation delay */
        /* this avoid the spinner to be displayed when visible for a very short period of time */
        opacity: 0;
    }

    @keyframes rotation {
        from {
            opacity: 1;
            transform: rotate(0deg);
        }
        to {
            opacity: 1;
            transform: rotate(359deg);
        }
    }
}