*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #0e1e58;
}
.loader{
    height: 350px;
    width: 350px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.loader div:nth-child(1){
    background-color: #FF006A;
    height: 200px;
    width: 125px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 40px;
    right: 0;
    transform: rotate(45deg);
    border-radius: 100px 100px 10px 10px;
    transform-origin: 50% 69%;
    animation: flip1 4s linear infinite;
}

@keyframes flip1{
    25%{
        transform: rotate(45deg) rotateX(180deg);
    }
    50%{
        transform: rotate(45deg) rotateX(180deg);
    }
    75%{
        transform: rotate(45deg);
    }
}

.loader div:nth-child(2){
    height: 200px;
    width: 125px;
    background-color: #FF006A;
    position: absolute;
    top: 151px;
    left: 132px;
    transform: rotate(135deg);
    transform-origin: 50% 31%;
    border-radius: 10px 10px 100px 100px;
    animation: flip2 4s 1s linear infinite;
}

@keyframes flip2{
    25%{
        transform: rotate(135deg) rotateX(180deg);
    }
    50%{
        transform: rotate(135deg) rotateX(180deg);
    }
    75%{
        transform: rotate(135deg);
    }
}