preloader style : demo 14

HTML

                        

CSS

                        .loader {
                            width: 75px;
                            height: 75px;
                            margin: 30px auto;
                            position: relative;
                            -webkit-transform: rotateZ(45deg);
                            transform: rotateZ(45deg);
                        }
                        .loader .loader-inner {
                            float: left;
                            width: 50%;
                            height: 50%;
                            position: relative;
                            -webkit-transform: scale(1.1);
                            transform: scale(1.1);
                        }
                        .loader .loader-inner:before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: #FE594D;
                            -webkit-animation: foldthecube 2.4s infinite linear both;
                            animation: foldthecube 2.4s infinite linear both;
                            -webkit-transform-origin: 100% 100%;
                            transform-origin: 100% 100%;
                        }
                        .loader .box2 {
                            transform: scale(1.1) rotateZ(90deg);
                            -webkit-transform: scale(1.1) rotateZ(90deg);
                        }
                        .loader .box3 {
                            transform: scale(1.1) rotateZ(180deg);
                            -webkit-transform: scale(1.1) rotateZ(180deg);
                        }
                        .loader .box4 {
                            transform: scale(1.1) rotateZ(270deg);
                            -webkit-transform: scale(1.1) rotateZ(270deg);
                        }
                        .loader .box2:before {
                            animation-delay: 0.3s;
                            -webkit-animation-delay: 0.3s;
                        }
                        .loader .box3:before {
                            animation-delay: 0.6s;
                            -webkit-animation-delay: 0.6s;
                        }
                        .loader .box4:before {
                            animation-delay: 0.9s;
                            -webkit-animation-delay: 0.9s;
                        }
                        @-webkit-keyframes foldthecube {
                            0%, 10% {
                                -webkit-transform: perspective(140px) rotateX(-180deg);
                                transform: perspective(140px) rotateX(-180deg);
                                opacity: 0;
                            }
                            25%,
                            75% {
                                -webkit-transform: perspective(140px) rotateX(0deg);
                                transform: perspective(140px) rotateX(0deg);
                                opacity: 1;
                            }
                            90%,
                            100% {
                                -webkit-transform: perspective(140px) rotateY(180deg);
                                transform: perspective(140px) rotateY(180deg);
                                opacity: 0;
                            }
                        }
                        @keyframes foldthecube {
                            0%, 10% {
                                -webkit-transform: perspective(140px) rotateX(-180deg);
                                transform: perspective(140px) rotateX(-180deg);
                                opacity: 0;
                            }
                            25%,
                            75% {
                                -webkit-transform: perspective(140px) rotateX(0deg);
                                transform: perspective(140px) rotateX(0deg);
                                opacity: 1;
                            }
                            90%,
                            100% {
                                -webkit-transform: perspective(140px) rotateY(180deg);
                                transform: perspective(140px) rotateY(180deg);
                                opacity: 0;
                            }
                        }
                    
License Terms