preloader style : demo 289

HTML

                        

CSS

                        .loader{
                            width: 230px;
                            height: 35px;
                            position: relative;
                            margin: 50px auto 0;
                        }
                        .loader span{
                            width: 32px;
                            height: 32px;
                            margin: 0 5px;
                            border-radius: 50%;
                            display: inline-block;
                            position: relative;
                        }
                        .loader span:nth-child(1){ background: #005395; }
                        .loader span:nth-child(2){ background: #1F4284; }
                        .loader span:nth-child(3){ background: #604F93; }
                        .loader span:nth-child(4){ background: #512F6C; }
                        .loader span:nth-child(5){ background: #C81C70; }
                        .loader span:before{
                            content: "";
                            background: inherit;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            position: absolute;
                            animation: wave 2s ease-out infinite;
                        }
                        .loader span:nth-child(1):before{ animation-delay: 0.2s; }
                        .loader span:nth-child(2):before{ animation-delay: 0.4s; }
                        .loader span:nth-child(3):before{ animation-delay: 0.6s; }
                        .loader span:nth-child(4):before{ animation-delay: 0.8s; }
                        .loader span:nth-child(5):before{ animation-delay: 1s; }
                        @keyframes wave{
                            50%,75%{ transform: scale(2.5); }
                            80%,100%{ opacity: 0; }
                        }
                    
License Terms