preloader style : demo 223

                        .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);
                            }
                        }