preloader style : demo 315

HTML

                        

CSS

                    .loader{
                        width: 86px;
                        height: 94px;
                        margin: 0 auto;
                        position: relative;
                    }
                    .loader div{
                        width: 18px;
                        height: 18px;
                        margin: 0 10px 0 0;
                        border-radius: 50px;
                        transform-origin: 50% 0;
                        display: inline-block;
                        animation: bounce 1s linear infinite;
                    }
                    .loader div:last-child{ margin: 0; }
                    .loader div:nth-child(1){ background: #f42f25; }
                    .loader div:nth-child(2){
                        background: #f49725;
                        animation-delay: 0.1s;
                    }
                    .loader div:nth-child(3){
                        background: #255ff4;
                        animation-delay: 0.2s;
                    }
                    @keyframes bounce{
                        0%, 100%{
                            transform: translateY(0) scale(1, 1);
                            animation-timing-function: ease-in;
                        }
                        45%{
                            transform: translateY(80px) scale(1, 1);
                            animation-timing-function: linear;
                        }
                        50%{
                            transform: translateY(80px) scale(1.5, 0.5);
                            animation-timing-function: linear;
                        }
                        55%{
                            transform: translateY(80px) scale(1, 1);
                            animation-timing-function: ease-out;
                        }
                    }
                    
License Terms