preloader style : demo 305

HTML

                        

CSS

                        .loader{
                            width: 110px;
                            height: 35px;
                            margin: 50px auto 0;
                        }
                        .loader .line{
                            background: linear-gradient(#8c0921, #e01d3d, #8c0921);
                            height: 35px;
                            width: 7px;
                            border-radius: 10px;
                            display: inline-block;
                            animation: animate 1s ease infinite;
                        }
                        .loader .line:nth-child(1),
                        .loader .line:nth-child(10){
                            animation-delay: 0.8s;
                        }
                        .loader .line:nth-child(2),
                        .loader .line:nth-child(9){
                            animation-delay: 0.6s;
                        }
                        .loader .line:nth-child(3),
                        .loader .line:nth-child(8){
                            animation-delay: 0.4s;
                        }
                        .loader .line:nth-child(4),
                        .loader .line:nth-child(7){
                            animation-delay: 0.2s;
                        }
                        .loader .line:nth-child(5),
                        .loader .line:nth-child(6){
                            animation-delay: 0s;
                        }
                        @keyframes animate{
                            0%,100%{ transform: scale(0); }
                            50%{ transform: scale(1.5); }
                        }
                    
License Terms