preloader style : demo 252

HTML

                        

CSS

                        .loader {
                            text-align: center;
                            padding: 35px 0 30px;
                            margin: 50px auto;
                        }
                        .loader ul{
                            padding: 0;
                            margin: 0;
                            list-style: none;
                        }
                        .loader ul li{
                            width: 30px;
                            height: 30px;
                            display: inline-block;
                        }
                        .loader ul li:nth-child(1){
                            background: #e45600;
                            transform: translate(34px, -34px);
                            animation: animate 4s ease-in-out infinite;
                        }
                        .loader ul li:nth-child(2){
                            background: #4834d4;
                            animation: animate_1 4s ease-in-out infinite;
                        }
                        .loader ul li:nth-child(3){
                            background: #be2edd;
                            animation: animate_2 4s ease-in-out infinite;
                        }
                        .loader ul li:nth-child(4){
                            background: #eb2f06;
                            animation: animate_3 4s ease-in-out infinite;
                        }
                        .loader ul li:nth-child(5){
                            background: #009432;
                            animation: animate_4 4s ease-in-out infinite;
                        }
                        @keyframes animate{
                            4.167%{ transform: translate(34px, 0); }
                            50%{ transform: translate(34px, 0); }
                            54.67%{ transform: translate(34px, 34px); }
                            58.33%{ transform: translate(68px, 34px); }
                            62.5%{ transform: translate(68px, 0); }
                            91.67%{ transform: translate(68px, 0); }
                            95.83%{ transform: translate(68px, -34px); }
                            100%{ transform: translate(34px, -34px); }
                        }
                        @keyframes animate_1{
                            4.167%{ transform: translate(0, 34px); }
                            8.33%{ transform: translate(34px, 34px); }
                            12.5%{ transform: translate(34px, 0); }
                            41.67%{ transform: translate(34px, 0); }
                            45.83%{ transform: translate(34px, -34px); }
                            50%{ transform: translate(0, -34px); }
                            54.167%{ transform: translate(0, 0); }
                            100%{ transform: translate(0, 0); }
                        }
                        @keyframes animate_2{
                            8.33%{ transform: translate(0, 0); }
                            12.5%{ transform: translate(0, -34px); }
                            16.67%{ transform: translate(34px, -34px); }
                            20.83%{ transform: translate(34px, 0); }
                            33.33%{ transform: translate(34px, 0); }
                            37.5%{ transform: translate(34px, 34px); }
                            41.67%{ transform: translate(0, 34px); }
                            45.83%{ transform: translate(0, 0); }
                            58.33%{ transform: translate(0, 0); }
                            62.5%{ transform: translate(0, -34px); }
                            66.67%{ transform: translate(34px, -34px); }
                            70.83%{ transform: translate(34px, 0); }
                            83.33%{ transform: translate(34px, 0); }
                            87.5%{ transform: translate(34px, 34px); }
                            91.67%{ transform: translate(0, 34px); }
                            95.83%{ transform: translate(0, 0); }
                            100%{ transform: translate(0, 0); }
                        }
                        @keyframes animate_3{
                            16.67%{ transform: translate(0, 0); }
                            20.83%{ transform: translate(0, 34px); }
                            25%{ transform: translate(34px, 34px); }
                            29.167%{ transform: translate(34px, 0); }
                            75%{ transform: translate(34px, 0); }
                            79.167%{ transform: translate(34px, -34px); }
                            83.33%{ transform: translate(0, -34px); }
                            87.5%{ transform: translate(0, 0); }
                            100%{ transform: translate(0, 0); }
                        }
                        @keyframes animate_4{
                            25%{ transform: translate(0, 0); }
                            29.167%{ transform: translate(0, -34px); }
                            33.33%{ transform: translate(-34px, -34px); }
                            37.5%{ transform: translate(-34px, 0); }
                            66.67%{ transform: translate(-34px, 0); }
                            70.83%{ transform: translate(-34px, 34px); }
                            75%{ transform: translate(0, 34px); }
                            79.167%{  transform: translate(0, 0); }
                            100%{ transform: translate(0, 0); }
                        }
                    
License Terms