preloader style : demo 105

HTML

                        

CSS

                        .loader{
                            width: 100px;
                            height: 70px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader span{
                            display: block;
                            width: 5px;
                            height: 10px;
                            background: #e43632;
                            position: absolute;
                            bottom: 0;
                            animation: loading-1 2.25s  infinite ease-in-out;
                        }
                        .loader span:nth-child(2){
                            left: 11px;
                            animation-delay: .2s;
                        }
                        .loader span:nth-child(3){
                            left: 22px;
                            animation-delay: .4s;
                        }
                        .loader span:nth-child(4){
                            left: 33px;
                            animation-delay: .6s;
                        }
                        .loader span:nth-child(5){
                            left: 44px;
                            animation-delay: .8s;
                        }
                        .loader span:nth-child(6){
                            left: 55px;
                            animation-delay: 1s;
                        }
                        .loader span:nth-child(7){
                            left: 66px;
                            animation-delay: 1.2s;
                        }
                        .loader span:nth-child(8){
                            left: 77px;
                            animation-delay: 1.4s;
                        }
                        .loader span:nth-child(9){
                            left: 88px;
                            animation-delay: 1.6s;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                height: 10px;
                                transform: translateY(0px);
                                background: #ff4d80;
                            }
                            25%{
                                height: 60px;
                                transform: translateY(15px);
                                background: #3423a6;
                            }
                            50%{
                                height: 10px;
                                transform: translateY(-10px);
                                background: #e29013;
                            }
                            100%{
                                height: 10px;
                                transform: translateY(0px);
                                background: #e50926;
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                height: 10px;
                                transform: translateY(0px);
                                background: #ff4d80;
                            }
                            25%{
                                height: 60px;
                                transform: translateY(15px);
                                background: #3423a6;
                            }
                            50%{
                                height: 10px;
                                transform: translateY(-10px);
                                background: #e29013;
                            }
                            100%{
                                height: 10px;
                                transform: translateY(0px);
                                background: #e50926;
                            }
                        }
                    
License Terms