.demo{
    background: #00a9a6;
}
.loader{
    width: 200px;
    height: 200px;
    position: relative;
    transform: rotate(45deg);
    margin: 50px auto;
}
.loader > div{
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0);
    border: 2px solid #ffe1d8;
    position: absolute;
    top: 73px;
    left: 73px;
}
.loader .loader-inner-1{
    animation: loading-3 1s infinite ease-in-out;
}
.loader .loader-inner-2{
    animation: loading-1 1s forwards,
    loading-4 1s infinite ease-in-out;
}
.loader .loader-inner-3{
    animation: loading-2 1s forwards,
    loading-5 1s infinite ease-in-out;
}
@-webkit-keyframes loading-1{
    100%{
        width: 100px;
        height:100px;
        left: 48px;
        top: 48px;
    }
}
@keyframes loading-1{
    100%{
        width: 100px;
        height:100px;
        left: 48px;
        top: 48px;
    }
}
@-webkit-keyframes loading-2{
    100%{
        width: 150px;
        height: 150px;
        left: 23px;
        top: 23px;
    }
}
@keyframes loading-2{
    100%{
        width: 150px;
        height: 150px;
        left: 23px;
        top: 23px;
    }
}
@-webkit-keyframes loading-3{
    0%   { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
    50%  { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
    100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes loading-3{
    0%   { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
    50%  { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
    100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
}
@-webkit-keyframes loading-4{
    0%   { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
    100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
}
@keyframes loading-4{
    0%   { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
    100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
}
@-webkit-keyframes loading-5{
    0%   { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
    100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes loading-5{
    0%   { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
    100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}