benivo-ui-library/loader.less

Benivo UI library

.loader {
    background-color: transparent;
    display: flex;
    width: 100%;
    height: 400px;
    align-items: center;
    justify-content: center;

    &.loader-small {
        height: 200px;
    }

    &.loader-medium {
        height: 400px;
    }

    &.loader-big {
        height: 600px;
    }

    &.has-overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        z-index: 3;
    }

    span {
        display: inline-block;
        height: 14px;
        width: 14px;
        .border-radius(50%);
        opacity: 0.4;
        transform: scale(.6);
        background-color: var(--primary);
        margin: 3px;

        &:nth-child(1) {
            animation: bubbling .6s linear infinite;
        }

        &:nth-child(2) {
            animation: bubbling .6s linear infinite .05s;
        }

        &:nth-child(3) {
            animation: bubbling .6s linear infinite .1s;
        }

        &:nth-child(4) {
            animation: bubbling .6s linear infinite .15s;
        }

        &:nth-child(5) {
            animation: bubbling .6s linear infinite .2s;
        }

        &:nth-child(6) {
            animation: bubbling .6s linear infinite .25s;
        }

        &:nth-child(7) {
            animation: bubbling .6s linear infinite .3s;
        }

        &:nth-child(8) {
            animation: bubbling .6s linear infinite .35s;
        }

        &:nth-child(9) {
            animation: bubbling .6s linear infinite .4s;
        }

        &:nth-child(10) {
            animation: bubbling .6s linear infinite .45s;
        }
    }
}

@keyframes bubbling {
    0% {
        transform: scale(.6);
    }

    20% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(.6);
    }
}