preloader style : demo 258

HTML

                        

CSS

                        .loader{
                            width: 50px;
                            height: 50px;
                            margin: 50px auto 0;
                            transform: rotate(45deg);
                            position: relative;
                            animation: animate 1.5s infinite;
                        }
                        .loader div{
                            background-color: #f5f5f5;
                            width: 25px;
                            height: 25px;
                            float: left;
                        }
                        .loader div:nth-child(1){ animation: animate_1 1.5s infinite; }
                        .loader div:nth-child(2){ animation:animate_2 1.5s infinite; }
                        .loader div:nth-child(3){ animation: animate_3 1.5s infinite; }
                        .loader div:nth-child(4){ animation: animate_4 1.5s infinite; }
                        @keyframes animate{
                            100%{ transform: rotate(-135deg); }
                        }
                        @keyframes animate_1{
                            25%{
                                background-color: #2ecc71;
                                transform: translate(0,-50px) rotate(-180deg);
                            }
                            100%{
                                background-color: #f5f5f5;
                                transform: translate(0,0) rotate(-180deg);
                            }
                        }
                        @keyframes animate_2{
                           25%{
                               background-color: #3498db;
                               transform: translate(50px,0) rotate(-180deg);
                            }
                            100%{
                                background-color: #f5f5f5;
                                transform: translate(0,0) rotate(-180deg);
                            }
                        }
                        @keyframes animate_3{
                           25%{
                               background-color: #9b59b6;
                               transform: translate(-50px,0) rotate(-180deg);
                            }
                            100%{
                                background-color: #f5f5f5;
                                transform: translate(0,0) rotate(-180deg);
                            }
                        }
                        @keyframes animate_4{
                            25%{
                                background-color: #e74c3c;
                               transform: translate(0,50px) rotate(-180deg);
                            }
                            100%{
                                background-color: #f5f5f5;
                                transform: translate(0,0) rotate(-180deg);
                            }
                        }
                    
License Terms