preloader style : demo 151

                        .loader{
                            width: 50px;
                            height: 50px;
                            margin: 100px auto;
                            position: relative;
                            -webkit-animation: loading-1 2s infinite ease-in-out;
                            animation: loading-1 2s infinite ease-in-out;
                        }
                        .loader .loader-inner{
                            width: 50px;
                            height: 50px;
                            border: 4px solid #000;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .loader .loader-inner:nth-child(1){
                            -webkit-animation: loading-2 2s ease-in-out infinite;
                            animation: loading-2 2s ease-in-out infinite;
                        }
                        .loader .loader-inner:nth-child(2){
                            -webkit-animation: loading-3 2s ease-in-out infinite;
                            animation: loading-3 2s ease-in-out infinite;
                        }
                        .loader .loader-inner:nth-child(3){
                            -webkit-animation: loading-4 2s ease-in-out infinite;
                            animation: loading-4 2s ease-in-out infinite;
                        }
                        .loader .loader-inner:nth-child(4){
                            -webkit-animation: loading-5 2s ease-in-out infinite;
                            animation: loading-5 2s ease-in-out infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                transform:rotate(-45deg);
                            }
                            50%{
                                transform:rotate(-135deg);
                            }
                            100%{
                                transform:rotate(-225deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform:rotate(-45deg);
                            }
                            50%{
                                transform:rotate(-135deg);
                            }
                            100%{
                                transform:rotate(-225deg);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(-50px, 0);
                                border-color:#ff005b;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(-50px, 0);
                                border-color:#ff005b;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(50px, 0);
                                border-color:#97d700;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(50px, 0);
                                border-color:#97d700;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            0%{
                                transform: translate(0);
                            }
                            50%{
                                transform: translate(0, -50px);
                                border-color: #fa7921;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                transform: translate(0);
                            }
                            50%{
                                transform: translate(0, -50px);
                                border-color: #fa7921;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @-webkit-keyframes loading-5{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(0, 50px);
                                border-color:#00bfea;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }
                        @keyframes loading-5{
                            0%{
                                transform:translate(0);
                            }
                            50%{
                                transform:translate(0, 50px);
                                border-color:#00bfea;
                            }
                            100%{
                                transform:translate(0);
                            }
                        }