preloader style : demo 276

HTML

                        

CSS

                        .loader{
                            width: 170px;
                            height: 40px;
                            position: relative;
                            margin: 50px auto 0;
                        }
                        .loader .inner_loader{
                            background: #db2651;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            display: inline-block;
                            animation: move-ball 1s infinite linear;
                        }
                        .loader .inner_loader:nth-child(2){
                            background: #1da1f2;
                            animation-delay: -0.2s;
                        }
                        .loader .inner_loader:nth-child(3){
                            background: #1ba506;
                            animation-delay: -0.4s;
                        }
                        .loader .inner_loader:nth-child(4){
                            background: #ec5f20;
                            animation-delay: -0.6s;
                        }
                        .loader .inner_loader:nth-child(5){
                            background: #742cc0;
                            animation-delay: -0.8s;
                        }
                        @keyframes move-ball{
                            0%{
                                box-shadow: 0px 21px 15px 0px rgba(0, 0, 0, 0.25);
                                filter: brightness(1.1);
                                transform: translatey(0) scale(1);
                            }
                            25%{
                                box-shadow: 0px 38.5px 25px 0px rgba(0, 0, 0, 0.25);
                                filter: brightness(1);
                                transform: translatey(-17.5px) scale(0.75);
                            }
                            50%{
                                box-shadow: 0px 21px 15px 0px rgba(0, 0, 0, 0.25);
                                filter: brightness(0.8);
                                transform: translatey(0px) scale(0.5);
                            }
                            75%{
                                box-shadow: 0px 3.5px 5px 0px rgba(0, 0, 0, 0.25);
                                filter: brightness(1);
                                transform: translatey(17.5px) scale(0.75);
                            }
                            100%{
                                box-shadow: 0px 21px 15px 0px rgba(0, 0, 0, 0.25);
                                filter: brightness(1.1);
                                transform: translatey(0) scale(1);
                            }
                        }
                    
License Terms