.waitning {
    
}
.wt-indicator  {
    background: url('../../images/loading.png') center center no-repeat;
    background-size: contain;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    animation: turning 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }



    .result-bar {
        position: relative;
        border-radius: 30px;
        height: 30px;
        width: 100%;
        xborder: 1px solid rgba(255,255,255,0.3);
        box-shadow:  0 0 10px rgba(255,255,255,0.5), inset 0 0 8px rgba(255,255,255,0.7);
        background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgb(245,255,0),rgba(0,255,0,1) 100%);
    }
    .rb-indicator  {
        margin: 0 auto;
        width: 90%;
        }
    .rb-indicator > div {
        position: relative;
        margin-top: -8px;
        
            display: inline-block;
        width: 0;
        height: 0;
        
        xanimation: shake 1s;
        xanimation-iteration-count: infinite;
        xanimation-timing-function: ease-in-out;
        
        }
    .rb-indicator > div::before {
        content: ' ';
        position: absolute;
        z-index: 0;
        margin-left: -46px;
        xmargin: -45px 0 0 -25px;
            display: inline-block;
        width: 0;
        height: 0;
        border-left: 26px solid transparent;
        border-right: 26px solid transparent;
        
        border-top: 46px solid rgba(0,0,0,0.7);
        filter: blur(4px);
        
        }
.rb-indicator > div:after {
    content: ' ';
    position: relative;
    margin-left: -46px;
    
        display: inline-block;
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    
    border-top: 46px solid #fff;
    
    
    }
        
    
    
    @keyframes shake {
        0% { left: -1%; }
        50% { left: 1%; }
        100% { left: -1%; }
    }
@keyframes turning {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}
    

.result-bar .rb-indicator {
    text-align: left;
    text-align: center;
    margin-left: -25%;
    height:     30px;
}
.result-bar .rb-indicator div {
    animation: gotoOK 1s;
}

@keyframes gotoOK {
    0% { left: -20%; opacity: 0;}
    30% {  opacity: 1;}
    100% { left: 0%; }
}
/* GOOD */
.result-bar.good .rb-indicator {
    text-align: center;
    margin-left: auto;
}
.result-bar.good .rb-indicator div {
    animation: gotoGOOD 1s;
}
@keyframes gotoGOOD {
    0% { margin-left: -95%; opacity: 0;}
    15% {  opacity: 1;}
    100% { margin-left: 0%; }
}
/* GREAT */
.result-bar.great .rb-indicator {
    text-align: right;
    margin-left: auto;
}
.result-bar.great .rb-indicator div {
    animation: gotoGREAT 1s;
}
@keyframes gotoGREAT {
    0% { margin-right: 95%; opacity: 0;}
    15% {  opacity: 1;}
    100% { margin-right: 0%; }
}


.result-bar .rb-indicator div {
    animation-timing-function: ease-in-out;
}