preloader style : demo 265

                        .loader{
                            width: 120px;
                            height: 120px;
                            margin: 30px auto 0;
                            position: relative;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            background-color: #FFCD57;
                            height: 80px;
                            width: 80px;
                            border-radius: 7px;
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            animation: animate 1.8s ease-in-out infinite alternate;
                        }
                        .loader:after{
                            background-color: #2F1E38;
                            height: 40px;
                            width: 40px;
                            border-radius: 3px;
                            animation: animate_1 1.8s ease-in-out infinite;
                        }
                        @keyframes animate{
                            0%{ transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1); }
                            45%{ transform: translateX(-50%) translateY(-50%) rotate(90deg) scale(0.8); }
                            100%{ transform: translateX(-50%) translateY(-50%) rotate(-270deg) scale(1.1); }
                        }
                        @keyframes animate_1{
                            0%{ transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1); }
                            65%{ transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.3); }
                            100%{ transform: translateX(-50%) translateY(-50%) rotate(270deg) scale(1); }
                        }