preloader style : demo 212

                        .preloader{
                            height: 105px;
                            width: 105px;
                            margin: 0 auto;
                            animation: loader-container 10s linear infinite;
                        }
                        .preloader > div{
                            width: 44px;
                            height: 44px;
                            box-shadow: 0 0 8px -2px rgba(0,0,0,0.3);
                            position: absolute;
                            animation-duration: 1500ms;
                            animation-timing-function: ease-in-out;
                            animation-iteration-count: infinite;
                        }
                        .box1{
                            background: linear-gradient(-45deg,#ff0000,#d60c0c);
                            transform-origin: bottom center;
                            top: 4px;
                            left: 4px;
                            animation-name: box1;
                        }
                        .box2{
                            background: linear-gradient(-45deg,#15c109,#29870d);
                            transform-origin: center left;
                            top: 4px;
                            right: 4px;
                            animation-name: box2;
                        }
                        .box3{
                            background: linear-gradient(-45deg,#c300ff,#a808a8);
                            transform-origin: top center;
                            bottom: 4px;
                            right: 4px;
                            animation-name: box3;
                        }
                        .box4{
                            background: linear-gradient(-45deg,#fc8e28,#ea7e0b);
                            transform-origin: center right;
                            bottom: 4px;
                            left: 4px;
                            animation-name: box4;
                        }
                        @keyframes loader-container{
                            0%{ transform: rotate(0); }
                            23%{ transform: rotate(0); }
                            25%{ transform: rotate(90deg); }
                            48%{ transform: rotate(90deg); }
                            50%{ transform: rotate(180deg); }
                            73%{ transform: rotate(180deg); }
                            75%{ transform: rotate(270deg); }
                            98%{ transform: rotate(270deg); }
                            100%{ transform: rotate(360deg); }
                        }
                        @keyframes box1{
                            0%{ transform: perspective(200px) rotateX(90deg); }
                            11%{ transform: perspective(200px) rotateX(0); }
                            88%{ transform: perspective(200px) rotateX(0); }
                            99%{ transform: perspective(200px) rotateX(90deg); }
                            100%{ transform: perspective(200px) rotateX(90deg); }
                        }
                        @keyframes box2{
                            0%{ transform: perspective(200px) rotateY(90deg); }
                            11%{ transform: perspective(200px) rotateY(90deg); }
                            22%{ transform: perspective(200px) rotateY(0); }
                            77%{ transform: perspective(200px) rotateY(0); }
                            88%{ transform: perspective(200px) rotateY(90deg); }
                            100%{ transform: perspective(200px) rotateY(90deg); }
                        }
                        @keyframes box3{
                            0%{ transform: perspective(200px) rotateX(-90deg); }
                            22%{ transform: perspective(200px) rotateX(-90deg); }
                            33%{ transform: perspective(200px) rotateX(0); }
                            66%{ transform: perspective(200px) rotateX(0); }
                            77%{ transform: perspective(200px) rotateX(-90deg); }
                            100%{ transform: perspective(200px) rotateX(-90deg); }
                        }
                        @keyframes box4{
                            0%{ transform: perspective(200px) rotateY(-90deg); }
                            33%{ transform: perspective(200px) rotateY(-90deg); }
                            44%{ transform: perspective(200px) rotateY(0); }
                            55%{ transform: perspective(200px) rotateY(0); }
                            66%{ transform: perspective(200px) rotateY(-90deg); }
                            100%{ transform: perspective(200px) rotateY(-90deg); }
                        }