@keyframes delay{
    0%,40%,100%{
        transform:scaleY(0.05);
        -webkit-transform:scaleY(0.05);
    }
    20%{
        transform:scaleY(1.0);
        -webkit-transform:scaleY(1.0);
    }
}
#page-transition-overlay-top,
#page-transition-overlay-bottom{
    position:fixed;
    left:0;
    width:100%;
    height:50vh;
    background:#ffffff;
    z-index:400;
    transform:translateY(0);
}
#page-transition-overlay-top{
    top:0;
}
#page-transition-overlay-bottom{
    bottom:0;
}
.loader{
    margin:0 auto;
    width:60px;
    height:50px;
    text-align:center;
    font-size:10px;
    position:fixed;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
    z-index:500;
    opacity:0;
}
.loader div{
    height:100%;
    width:8px;
    display:inline-block;
    float:left;
    margin-left:2px;
    animation:delay 0.8s infinite ease-in-out;
    background-color:#611a86;
}
.loader .bar2{
    animation-delay:-0.7s;
}
.loader .bar3{
    animation-delay:-0.6s;
}
.loader .bar4{
    animation-delay:-0.5s;
}
.loader .bar5{
    animation-delay:-0.4s;
}
.loader .bar6{
    animation-delay:-0.3s;
}