preloader style : demo 49

HTML

                        

CSS

                        .loader{
                            width: 60px;
                            height: 75px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loader-inner1, .loader-inner2, .loader-inner3, .loader-inner4{
                            width: 12px;
                            height: 50px;
                            background-color: #e49393;
                            display: inline-block;
                            transform: translateY(25px);
                        }
                        .loader-inner1{
                            animation: loading .5s ease infinite alternate;
                        }
                        .loader-inner2{
                            animation: loading .5s ease .08s infinite alternate;
                        }
                        .loader-inner3{
                            animation: loading .5s ease .16s infinite alternate;
                        }
                        .loader-inner4{
                            animation: loading .5s ease .24s infinite alternate;
                        }
                        @-webkit-keyframes loading{
                            to { transform: translateY(0); }
                        }
                        @keyframes loading{
                            to { transform: translateY(0); }
                        }
                    
License Terms