exciting-aftermath/Portfolio.WebUI.Server/Components/Component/Loading.razor.css

body {
    background: #000;
}

#load {
    position: absolute;
    width: 600px;
    height: 36px;
    left: 50%;
    top: 40%;
    margin-left: -300px;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

    #load div {
        position: absolute;
        width: 20px;
        height: 36px;
        opacity: 0;
        font-family: Helvetica, Arial, sans-serif;
        animation: move 3s linear infinite;
        -o-animation: move 3s linear infinite;
        -moz-animation: move 3s linear infinite;
        -webkit-animation: move 3s linear infinite;
        transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        color: #35C4F0;
    }

        #load div:nth-child(2) {
            animation-delay: 0.2s;
            -o-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            -webkit-animation-delay: 0.2s;
        }

        #load div:nth-child(3) {
            animation-delay: 0.4s;
            -o-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
        }

        #load div:nth-child(4) {
            animation-delay: 0.6s;
            -o-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -webkit-animation-delay: 0.6s;
        }

        #load div:nth-child(5) {
            animation-delay: 0.8s;
            -o-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s;
        }

        #load div:nth-child(6) {
            animation-delay: 1s;
            -o-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }

        #load div:nth-child(7) {
            animation-delay: 1.2s;
            -o-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            -webkit-animation-delay: 1.2s;
        }

@keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }

    35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-moz-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }

    35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-webkit-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }

    35% {
        left: 41%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        left: 59%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        left: 100%;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}

@-o-keyframes move {
    0% {
        left: 0;
        opacity: 0;
    }

    35% {
        left: 41%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        left: 59%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        left: 100%;
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
    }
}