.lp_progressbar {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Raleway";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.lp_progressbar .bg {width:100%;height:100%;background-color: rgba(0,0,0,0.3);}

.lp_progressbar .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-200%);
    width: 200px;
    height: 80px;
    background-color:#fff;
    /* padding: 20px 40px 27px 40px; */
    border-radius: 10px;
}

.lp_progressbar .box h3 {
    color: rgba(100,100,100,0.9);
    font-weight: bold;
    font-family: Arial;
}

.lp_progressbar .box .progress-bar {
    width: 100%;
    height: 12px;
    background: linear-gradient(to right,rgb(76,217,105),rgb(90,200,250),rgb(0,132,255),rgb(52,170,220),rgb(88,86,217),rgb(255,45,83));
    margin-top: 10px;
    background-size: 400% 400%;
    border-radius: 5px;
    -webkit-animation: Gradient 6s ease infinite;
    -moz-animation: Gradient 6s ease infinite;
    animation: Gradient 6s ease infinite;
}

.lp_progressbar .box .shadow {
    width: 99%;
    height: 10px;
    background: linear-gradient(to bottom,rgba(100,100,100,0.17),rgba(100,100,100,0.1),transparent);
    transform: skew(45deg) translate(-5px,12px);
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}