preloader style : demo 136

                        .loader{
                            width: 68px;
                            height: 68px;
                            margin: 50px auto;
                        }
                        .loader .loader-inner{
                            display: inline-block;
                            width: 19px;
                            height: 19px;
                            background: #ed254e;
                            position: relative;
                            transition: all 0.92s;
                            animation: loading-1 5.75s linear infinite;
                        }
                        .loader .loader-inner:nth-child(1){
                            animation-delay: 3.45s;
                        }
                        .loader .loader-inner:nth-child(2){
                            animation-delay: 1.73s;
                            animation: loading-1 13.8s linear infinite;
                        }
                        .loader .loader-inner:nth-child(3){
                            animation-delay: 2.3s;
                        }
                        .loader .loader-inner:nth-child(4){
                            animation-delay: 0.23s;
                        }
                        .loader .loader-inner:nth-child(5){
                            animation-delay: 4.6s;
                        }
                        .loader .loader-inner:nth-child(6){
                            animation-delay: 2.3s;
                            animation: loading-1 8.05s linear infinite;
                        }
                        .loader .loader-inner:nth-child(7){
                            animation-delay: 0.46s;
                        }
                        .loader .loader-inner:nth-child(8){
                            animation-delay: 1.73s;
                            animation: loading-1 6.9s linear infinite;
                        }
                        .loader .loader-inner:nth-child(9){
                            animation-delay: 28.75s;
                            animation: loading-1 9.2s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                -webkit-transform: none;
                            }
                            20%{
                                -webkit-transform: rotateZ(-90deg) rotateY(180deg);
                            }
                            40%{
                                background: #1c3d7f;
                                -webkit-transform: none;
                            }
                            60%{
                                background: rgb(255,255,255);
                            }
                            80%{
                                background: #fcab10;

                            }
                            90%{
                                -webkit-transform: none;
                                background: #63b931;
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform: none;
                            }
                            20%{
                                transform: rotateZ(-90deg) rotateY(180deg);
                            }
                            40%{
                                background: #1c3d7f;
                                transform: none;
                            }
                            60%{
                                background: rgb(255,255,255);
                            }
                            80%{
                                background: #fcab10;
                            }
                            90%{
                                transform: none;
                                background: #63b931;
                            }
                        }