traffic-laser/src/components/base/assets/scss/components/_loading.scss

.ui-loading {
    position        : absolute;
    display         : flex;
    align-items     : center;
    justify-content : center;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    overflow        : hidden;
    background-color: rgba($color: #000000, $alpha: 0.3);
    --width         : 15px;
    --color         : #fff;
}

.ui-loading__box {
    position       : relative;
    width          : 50px;
    height         : 50px;
    display        : flex;
    align-items    : center;
    justify-content: center;

    img {
        width: 100%;
    }

    .default {
        div {
            width        : var(--width);
            height       : var(--width);
            background   : var(--color);
            border-radius: 50%;
            display      : inline-block;
            margin-left  : calc(var(--width) * 0.6);
        }

        div:nth-child(1) {
            animation: ui-loading-default 1s -0.5s linear infinite;
        }

        div:nth-child(2) {
            animation: ui-loading-default 1s -0.25s linear infinite;
        }

        div:nth-child(3) {
            animation: ui-loading-default 1s 0s linear infinite;
        }
    }
}

@keyframes ui-loading-default {
    0% {
        transform: scale(1);
        opacity  : 1;
    }

    50% {
        transform: scale(0.5);
        opacity  : 0.5;
    }

    100% {
        transform: scale(1);
        opacity  : 0.8;
    }
}