preloader style : demo 235

HTML

                        

CSS

                        .demo{ background-color: #27ae60; }
                        .loader{
                            width: 6px;
                            height: 40px;
                            margin: 60px auto;
                            transform: translate3d(0, 0, 0);
                            position: relative;
                            animation: paddles 0.75s ease-out infinite;
                        }
                        .loader:before{
                            content: "";
                            background-color: #fff;
                            width: 10px;
                            height: 10px;
                            margin: 0 auto;
                            border-radius: 50%;
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 15px;
                            animation: ballbounce 0.6s ease-out infinite;
                        }
                        @keyframes paddles{
                            0%{ box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff; }
                            50%{ box-shadow: -25px 8px 0px #fff, 25px -10px 0px #fff; }
                            100%{ box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff; }
                        }
                        @keyframes ballbounce{
                            0%{ transform: translateX(-20px) scale(1, 1.2); }
                            25%{ transform: scale(1.2, 1); }
                            50%{ transform: translateX(15px) scale(1, 1.2); }
                            75%{ transform: scale(1.2, 1); }
                            100%{ transform: translateX(-20px); }
                        }
                    
License Terms