@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

@-moz-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}


/*.fa-spin {*/
/*    -webkit-animation: fa-spin 2s infinite linear;*/
/*    animation: fa-spin 2s infinite linear;*/
/*}*/

/*.fa-pulse {*/
/*    -webkit-animation: fa-spin 1s infinite steps(8);*/
/*    animation: fa-spin 1s infinite steps(8);*/
/*}*/

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.bar-loading {
    position: relative;
}

.bar-loading:before {
    background: #ff6275;
    position: absolute;
    right: 0;
    width: 100%;
    height: 3px;
    left: 0;
    border-radius: 9px;

    content: "";
    top: 0;
    bottom: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;

}

.spinner-loading {
    position: relative;
}
.spinner-loading:after{
    content: '';
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .9);
    position: absolute;
}
.spinner-loading:before {
    content: "\f110";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    position: absolute;
    font-size: 2rem;
    color: #777;
    top: 50%;
    left: 50%;
    margin-left: -1rem;
    width: 2rem;
    height: 2rem;
    z-index: 9000;
       -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}