preloader style : demo 168

HTML

                        

CSS

                        .loader{
                            width: 400px;
                            height: 100px;
                            margin: 70px auto;
                            perspective: 300px;
                            perspective-origin: 50% 50%;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 20%;
                            height: 100%;
                            box-sizing: border-box;
                            position: absolute;
                            left: 0;
                            transform-origin: 0% 50%;
                            animation-duration: 4s;
                            animation-timing-function: linear;
                            animation-iteration-count: infinite;
                        }
                        .loader .loader-inner:nth-child(1){
                            background: #853aff;
                            left: 0;
                            z-index: 1;
                            animation-name: loading-1;
                        }
                        .loader .loader-inner:nth-child(2){
                            background: #f1a94e;
                            left: 20%;
                            z-index: 2;
                            animation-name: loading-2;
                        }
                        .loader .loader-inner:nth-child(3){
                            background: #e45641;
                            left: 40%;
                            z-index: 3;
                            animation-name: loading-3;
                        }
                        .loader .loader-inner:nth-child(4){
                            background: #38040e;
                            left: 60%;
                            z-index: 4;
                            animation-name: loading-4;
                        }
                        .loader .loader-inner:nth-child(5){
                            background: #b1ff16;
                            left: 80%;
                            z-index: 5;
                            animation-name: loading-5;
                        }
                        @keyframes loading-1{
                            0%{
                                transform: rotateY(-180deg);
                                opacity: 0;
                                transform-origin: 0% 50%;
                                background-color:#853AFF;
                            }
                            4%{
                                background: #853aff;
                            }
                            5%{
                                background: #b1ff16;
                            }
                            10%{
                                transform: rotateY(0deg);
                                opacity: 1;
                                background: #b1ff16;
                                transform-origin: 0% 50%;
                            }
                            11%{
                                transform-origin: 100% 50%;
                                background: #853aff;
                            }
                            48%{
                                z-index: 1;
                            }
                            49%{
                                z-index: 10;
                            }
                            50%{
                                transform: rotateY(0deg);
                            }
                            51%{
                                transform-origin: 100% 50%;
                            }
                            60%{
                                transform: rotateY(180deg);
                                opacity: 1;
                                background: #853aff;
                            }
                            61%{
                                opacity: 0;
                            }
                            100%{
                                z-index: 10;
                                transform: rotateY(180deg);
                                opacity: 0;
                                transform-origin: 100% 50%;
                                background: #853aff;
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                transform: rotateY(-180deg);
                                background: #b1ff16;
                                opacity: 0;
                                transform-origin: 0% 50%;
                            }
                            9%{
                                opacity: 0;
                            }
                            10%{
                                transform: rotateY(-180deg);
                                opacity: 1;
                            }
                            15%{
                                background: #b1ff16;
                            }
                            20% {
                                background: #b1ff16;
                                transform: rotateY(0deg);
                                transform-origin: 0% 50%;
                            }
                            21%{
                                transform-origin: 100% 50%;
                                background: #fcab10;
                            }
                            48%{
                                z-index: 2;
                            }
                            49%{
                                z-index: 9;
                            }
                            60%{
                                opacity: 1;
                                transform: rotateY(0deg);
                                background: #fcab10;
                            }
                            61%{
                                background: #853aff;
                                transform-origin: 100% 50%;
                            }
                            64%{
                                background: #853aff;
                            }
                            65%{
                                background: #fcab10;
                            }
                            70%{
                                transform: rotateY(180deg);
                                opacity: 1;
                            }
                            71%{
                                opacity: 0;
                            }
                            100%{
                                z-index: 9;
                                background: #fcab10;
                                transform: rotateY(180deg);
                                opacity: 0;
                                transform-origin: 100% 50%;
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                transform: rotateY(-180deg);
                                background: #b1ff16;
                                opacity: 0;
                                transform-origin: 0% 50%;
                            }
                            19%{
                                opacity: 0;
                            }
                            20%{
                                transform: rotateY(-180deg);
                                opacity: 1;
                            }
                            25%{
                                background: #b1ff16;
                            }
                            30%{
                                background: #b1ff16;
                                transform: rotateY(0deg);
                                transform-origin: 0% 50%;
                            }
                            31%{
                                transform-origin: 100% 50%;
                                background: #fe2712;
                            }
                            48%{
                                z-index: 3;
                            }
                            49%{
                                z-index: 8;
                            }
                            70%{
                                transform: rotateY(0deg);
                                opacity: 1;
                                background: #fe2712;
                            }
                            71%{
                                background: #fcab10;
                                transform-origin: 100% 50%;
                            }
                            74%{
                                background: #fcab10;
                            }
                            75%{
                                background: #fe2712;
                            }
                            80%{
                                transform: rotateY(180deg);
                                opacity: 1;
                            }
                            81%{
                                opacity: 0;
                            }
                            100%{
                                z-index: 8;
                                background: #fe2712;
                                transform: rotateY(180deg);
                                opacity: 0;
                                transform-origin: 100% 50%;
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                transform: rotateY(-180deg);
                                background: #b1ff16;
                                opacity: 0;
                                transform-origin: 0% 50%;
                            }
                            29%{
                                opacity: 0;
                            }
                            30%{
                                transform: rotateY(-180deg);
                                opacity: 1;
                            }
                            35%{
                                background: #b1ff16;
                            }
                            40%{
                                background: #b1ff16;
                                transform: rotateY(0deg);
                                transform-origin: 0% 50%;
                            }
                            41%{
                                transform-origin: 100% 50%;
                                background: #38040E;
                            }
                            48%{
                                z-index: 4;
                            }
                            49%{
                                z-index: 7;
                            }
                            80%{
                                transform: rotateY(0deg);
                                opacity: 1;
                                background: #38040e;
                            }
                            81%{
                                background: #fe2712;
                                transform-origin: 100% 50%;
                            }
                            84%{
                                background: #fe2712;
                            }
                            85%{
                                background: #38040e;
                            }
                            90%{
                                transform: rotateY(180deg);
                                opacity: 1;
                            }
                            91%{
                                opacity: 0;
                            }
                            100%{
                                z-index: 7;
                                background: #38040e;
                                transform: rotateY(180deg);
                                opacity: 0;
                                transform-origin: 100% 50%;
                            }
                        }
                        @keyframes loading-5{
                            0%{
                                transform: rotateY(-180deg);
                                background: #b1ff16;
                                opacity: 0;
                                transform-origin: 0% 50%;
                            }
                            39%{
                                opacity: 0;
                            }
                            40%{
                                transform: rotateY(-180deg);
                                opacity: 1;
                            }
                            45%{
                                background: #b1ff16;
                            }
                            48%{
                                z-index: 5;
                            }
                            49%{
                                z-index: 6;
                            }
                            50%{
                                background: #b1ff16;
                                transform: rotateY(0deg);
                                transform-origin: 0% 50%;
                            }
                            51%{
                                transform-origin: 100% 50%;
                                background: #b1ff16;
                            }
                            90%{
                                transform: rotateY(0deg);
                                opacity: 1;
                                background: #b1ff16;
                            }
                            91%{
                                background: #38040e;
                                transform-origin: 100% 50%;
                            }
                            94%{
                                background: #38040e;
                            }
                            95%{
                                background: #b1ff16;
                            }
                            100%{
                                z-index: 6;
                                background: #b1ff16;
                                transform: rotateY(180deg);
                                opacity: 0;
                                transform-origin: 100% 50%;
                            }
                        }
                        @media only screen and (max-width: 480px){
                            .loader{
                                width: 300px;
                                height: 70px;
                            }
                        }
                        @media only screen and (max-width: 360px){
                            .loader{
                                width: 200px;
                                height: 50px;
                            }
                        }
                    
License Terms