preloader style : demo 8

HTML

                        

CSS

                        .loader > div {
                            -webkit-animation-fill-mode: both;
                            animation-fill-mode: both;
                            width: 0;
                            height: 0;
                            border-left: 20px solid transparent;
                            border-right: 20px solid transparent;
                            border-bottom: 20px solid #fff;
                            margin: 50px auto;
                            -webkit-animation: loader 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
                            animation: loader 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
                        }
                        @-webkit-keyframes loader {
                            25% {
                                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                                transform: perspective(100px) rotateX(180deg) rotateY(0); }
                            50% {
                                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                                transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
                            75% {
                                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                                transform: perspective(100px) rotateX(0) rotateY(180deg); }
                            100% {
                                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                                transform: perspective(100px) rotateX(0) rotateY(0); }
                        }
                        @keyframes loader {
                            25% {
                                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                                transform: perspective(100px) rotateX(180deg) rotateY(0); }
                            50% {
                                -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                                transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
                            75% {
                                -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                                transform: perspective(100px) rotateX(0) rotateY(180deg); }
                            100% {
                                -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                                transform: perspective(100px) rotateX(0) rotateY(0); }
                        }
                    
License Terms