nitro-react/src/components/loading/LoadingView.scss

.nitro-loading {
    position: relative;
    background: linear-gradient(to bottom, $white, 15%, $primary);

    .connecting-duck {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0;
        left: 0;
        background: url('../../assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
        width: 235px;
        height: 127px;
        animation: 1.5s connecting-duck infinite step-end;
        transform: scale(0.5);

        &.01 {
            background-position: 0 0;
        }

        &.02 {
            background-position: 0 -132px;
            width: 280px;
            height: 151px;
        }

        &.03 {
            background-position: 0 -288px;
            width: 326px;
            height: 174px;
        }

        &.04 {
            background-position: 0 -467px;
        }

        &.05 {
            background-position: 0 -599px;
            width: 280px;
            height: 151px;
        }

        &.06 {
            background-position: 0 -755px;
            width: 326px;
            height: 174px;
        }

        &.07 {
            background-position: 0 -934px;
            width: 190px;
            height: 104px;
        }
    }

    .logo {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0;
        left: 0;
        width: 35%;
        height: 35%;
        background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
        z-index: -1;
    }
}

@keyframes connecting-duck {
    0% {
        background-position: 0 0;
        width: 235px;
        height: 127px;
    }

    15% {
        background-position: 0 -132px;
        width: 280px;
        height: 151px;
    }

    30% {
        background-position: 0 -288px;
        width: 326px;
        height: 174px;
    }

    45% {
        background-position: 0 -467px;
        width: 235px;
        height: 127px;
    }

    60% {
        background-position: 0 -599px;
        width: 280px;
        height: 151px;
    }

    75% {
        background-position: 0 -755px;
        width: 326px;
        height: 174px;
    }

    90% {
        background-position: 0 -934px;
        width: 190px;
        height: 104px;
    }
}