preloader style : demo 240

HTML

                        

CSS

                        .loader{
                            width: 130px;
                            height: 50px;
                            margin: 50px auto 0;
                            position: relative;
                        }
                        .loader span{
                            background: #eb3b5a;
                            width: 20px;
                            height: 10px;
                            position: absolute;
                            bottom: 10px;
                            animation: animate 2s infinite linear;
                        }
                        .loader span:nth-child(2){
                            left: 21px;
                            animation-delay: .2s;
                        }
                        .loader span:nth-child(3){
                            left: 42px;
                            animation-delay: .3s;
                        }
                        .loader span:nth-child(4){
                            left: 63px;
                            animation-delay: .4s;
                        }
                        .loader span:nth-child(5){
                            left: 85px;
                            animation-delay: .5s;
                        }
                        @keyframes animate{
                            0%{
                                height: 5px;
                                opacity: 0;
                                transform: translateX(7px);
                            }
                            25%{
                                background: #eb3b5a;
                                height: 30px;
                                opacity: 1;
                                transform: translateX(7px);
                            }
                            50%{
                                background: #2d98da;
                                height: 5px;
                                opacity: 1;
                                transform: translateX(12px);
                            }
                            100%{
                                height: 5px;
                                opacity: 0;
                                transform: translateX(17px);
                            }
                        }
                    
License Terms