preloader style : demo 152

                        .loader{
                            width: 320px;
                            height: 128px;
                            margin: 40px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 64px;
                            height: 128px;
                            border-radius: 6px;
                            margin-left: -32px;
                            position: absolute;
                            left: 50%;
                            transform-origin: center;
                        }
                        .loader .loader-inner:nth-child(1){
                            background: #119da4;
                            z-index: 9;
                            animation: loading-1 1.9s ease-out infinite;
                        }
                        .loader .loader-inner:nth-child(2){
                            background: #ffc63a;
                            z-index: 8;
                            animation: loading-2 1.9s ease-out infinite;
                        }
                        .loader .loader-inner:nth-child(3){
                            background: #ff0000;
                            z-index: 7;
                            animation: loading-3 1.9s ease-out infinite;
                        }
                        .loader .loader-inner:nth-child(4){
                            background: #00d33f;
                            z-index: 6;
                            animation: loading-4 1.9s ease-out infinite;
                        }
                        .loader .loader-inner:nth-child(5){
                            background: #124e78;
                            z-index: 5;
                            animation: loading-5 1.9s ease-out infinite;
                        }
                        .loader .loader-inner:nth-child(6){
                            background: #ea2f6c;
                            z-index: 4;
                            animation: loading-6 1.9s ease-out infinite;
                        }
                        @keyframes loading-1{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            15%{
                                transform: translateX(10em) rotate(90deg);
                            }
                            35%{
                                transform: translateX(-10em) rotate(270deg);
                            }
                            55%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            16%{
                                transform: translateX(8.33333em) rotate(90deg);
                            }
                            38%{
                                transform: translateX(-8.33333em) rotate(270deg);
                            }
                            60%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            17%{
                                transform: translateX(6.66667em) rotate(90deg);
                            }
                            41%{
                                transform: translateX(-6.66667em) rotate(270deg);
                            }
                            65%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            18%{
                                transform: translateX(5em) rotate(90deg);
                            }
                            44%{
                                transform: translateX(-5em) rotate(270deg);
                            }
                            70%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }
                        @keyframes loading-5{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            19%{
                                transform: translateX(3.33333em) rotate(90deg);
                            }
                            47%{
                                transform: translateX(-3.33333em) rotate(270deg);
                            }
                            75%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }
                        @keyframes loading-6{
                            0%{
                                transform: translateX(0) rotate(0deg);
                            }
                            20%{
                                transform: translateX(1.66667em) rotate(90deg);
                            }
                            50%{
                                transform: translateX(-1.66667em) rotate(270deg);
                            }
                            80%{
                                transform: translateX(0) rotate(360deg);
                            }
                            100%{
                                transform: translateX(0) rotate(360deg);
                            }
                        }