.demo{ background: #f53b57; }

.loader{
    width: 100px;
    height: 60px;
    margin: 50px auto 0;
    border: 5px solid #ecf0f1;
    position: relative;
    z-index: 1;
}

.loader-page{
    background: transparent;
    width: 50px;
    height: 60px;
    margin: 0 auto;
    border-top: 5px solid #ecf0f1;
    border-bottom: 5px solid #ecf0f1;
    border-right: 5px solid #ecf0f1;
    transform-origin: 0% 50%;
    position: absolute;
    left: 50%;
    top: -5px;
    animation: flip 1.2s infinite linear forwards;
}

.loader-page:nth-child(1){
    z-index: -1;
    animation-delay: 1.4s;
}

.loader-page:nth-child(2){
    z-index: -2;
    animation-delay: 2.8s;
}

.loader-page:nth-child(3){
    z-index: -3;
    animation-delay: 4.2s;
}

@keyframes flip{
    0%{ transform: perspective(600px) rotateY(0deg); }
    20%{ background: transparent; }
    29.9%{ background: transparent; }
    30%{
        background: transparent;
        transform: perspective(200px) rotateY(-90deg);
    }
    54.999%{ opacity: 1; }
    55%{ opacity: 0; }
    60%{
        background: transparent;
        transform: perspective(200px) rotateY(-180deg);
    }
    100%{
        background: transparent;
        transform: perspective(200px) rotateY(-180deg);
    }
}