/* loader global style */
.loader-hidden{
    opacity: 0;
    visibility: hidden;
}

/* progess bar style */
.progress-loader { 
    position:fixed;
    top:0;
    left:0;
    height:3px;
    /*display:block;*/
    z-index: 9999;
    width: 100%;
    overflow: hidden; 
    background-color: #3f6ad8;
    border-radius: 2px;
    background-clip: padding-box;
} 

.progress-loader .indeterminate { 
    background-color:black; 
} 

.progress-loader .indeterminate:before { 
    content: ''; 
    position: absolute; 
    background-color: white;
    top: 0; 
    left: 0; 
    bottom: 0; 
    will-change: left, right; 
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 
} 

.progress-loader .indeterminate:after {
    content: ''; 
    position: absolute; 
    background-color: #3f6ad8;
    top: 0; 
    left: 0; 
    bottom: 0; 
    will-change: left, right; 
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s; animation-delay: 1.15s; 
} 

@-webkit-keyframes indeterminate { 
    0% { left: -35%; right: 100%; } 
    60% { left: 100%; right: -90%; } 
    100% { left: 100%; right: -90%; } 
} 

@keyframes indeterminate { 
    0% { left: -35%; right: 100%; } 
    60% { left: 100%; right: -90%; } 
    100% { left: 100%; right: -90%; } 
} 

@-webkit-keyframes indeterminate-short { 
    0% { left: -200%; right: 100%; } 
    60% { left: 107%; right: -8%; } 
    100% { left: 107%; right: -8%; } 
} 

@keyframes indeterminate-short { 
    0% { left: -200%; right: 100%; } 
    60% { left: 107%; right: -8%; } 
    100% { left: 107%; right: -8%; } 
}