preloader style : demo 267

                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto 0;
                            position: relative;
                            animation: animeA steps(4) infinite;
                            animation-duration: 2s;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            background: #fff;
                            width: 100%;
                            height: 50%;
                            transform-origin: 50% 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            animation: animeB 2s linear infinite;
                            clip-path: polygon(50% 0,100% 100%,0% 100%);
                        }
                        .loader:after{
                            transform: rotate(180deg);
                            animation: animeC 2s linear infinite;
                            clip-path: polygon(50% 0,100% 100%,0% 100%);
                        }
                        @keyframes animeA{
                            0%{ transform: rotate(0); }
                            100%{ transform: rotate(-360deg); }
                        }
                        @keyframes animeB{
                            0%, 25%, 50%, 75%, 100%{
                                opacity: 1;
                                transform: translateZ(0) rotateX(0deg);
                            }
                            12.5%, 62.5%{
                                opacity: 1;
                                transform: translateZ(1px) rotateX(-180deg);
                            }
                            37.5%, 87.5% {
                                opacity: 0;
                                transform: translateZ(0) rotateX(0deg);
                            }
                        }
                        @keyframes animeC{
                            0%, 25%, 50%, 75%, 100%{
                                opacity: 1;
                                transform: translateZ(0) rotateZ(180deg) rotateX(0deg);
                            }
                            12.5%, 62.5%{
                                opacity: 0;
                                transform: translateZ(0) rotateZ(180deg) rotateX(0deg);
                            }
                            37.5%, 87.5%{
                                opacity: 1;
                                transform: translateZ(1px) rotateZ(180deg) rotateX(-180deg);
                            }
                        }