preloader style : demo 90

HTML

                        

CSS

                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 60px auto;
                            position: relative;
                            -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                        }
                        .loader .loader-inner-1{
                            width: 33.333%;
                            height: 33.333%;
                            position: absolute;
                        }
                        .loader .loader-inner-2{
                            position: absolute;
                            width: 16.6665%;
                            height: 16.6665%;
                        }
                        .loader .box-1{
                            top: 0;
                            left: 50%;
                            margin-left: -16.6665%;
                            -webkit-animation: loading-1 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-1 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-2{
                            top: 0;
                            left: 0;
                            -webkit-animation: loading-6 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-6 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-3{
                            top: 50%;
                            right: 0;
                            margin-top: -16.6665%;
                            -webkit-animation: loading-2 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-2 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-4{
                            top: 0;
                            right: 0;
                            -webkit-animation: loading-5 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-5 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-5{
                            top: 50%;
                            left: 0;
                            margin-top: -16.6665%;
                            -webkit-animation: loading-4 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-4 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-6{
                            bottom: 0;
                            right: 0;
                            -webkit-animation: loading-7 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-7 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-7{
                            bottom: 0;
                            left: 50%;
                            margin-left: -16.6665%;
                            -webkit-animation: loading-3 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-3 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-8{
                            bottom: 0;
                            left: 0;
                            -webkit-animation: loading-8 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                            animation: loading-8 2s cubic-bezier(0.585, -0.225, 0.43, 1.31) infinite;
                        }
                        .loader .box-red{
                            background: #f52220;
                        }
                        .loader .box-blue{
                            background: #02c1c1;
                        }
                        .loader .box-green{
                            background: #009a3c;
                        }
                        .loader .box-peach{
                            background: #db5b53;
                        }
                        .loader .box-pink{
                            background: #e40066;
                        }
                        .loader .box-yellow{
                            background: #f59c00;
                        }
                        .loader .box-purple{
                            background: #5c0475;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                top: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                top: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                right: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-2{
                            0% {
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25% {
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50% {
                                right: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75% {
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100% {
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                bottom: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                bottom: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            0%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                left: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            50%{
                                left: 66.666%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(100px);
                                transform: translateZ(100px);
                            }
                            100%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-5{
                            0%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                top: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-5{
                            0%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                top: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                top: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-6{
                            0%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                left: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-6{
                            0%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                left: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                left: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-7{
                            0%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                right: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-7{
                            0%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                right: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                right: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @-webkit-keyframes loading-8{
                            0%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                bottom: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                        @keyframes loading-8{
                            0%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            25%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            50%{
                                bottom: 83.3335%;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                            75%{
                                -webkit-transform: translateZ(300px);
                                transform: translateZ(300px);
                            }
                            100%{
                                bottom: 0;
                                -webkit-transform: translateZ(0);
                                transform: translateZ(0);
                            }
                        }
                    
License Terms