preloader style : demo 42

HTML

                        

CSS

                        .loader{
                            text-align: center;
                            margin: 40px 0;
                        }
                        .loader span{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background: #f7bd3a;
                            display: inline-block;
                        }
                        .loader span:first-child{
                            animation: loading-2 0.5s linear infinite;
                            opacity: 0;
                            transform: translate(-20px);
                        }
                        .loader span:nth-child(2),
                        .loader span:nth-child(3){
                            animation: loading-3 0.5s linear infinite;
                        }
                        .loader span:last-child{
                            animation: loading-1 0.5s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            100%{
                                transform:translate(40px);
                                opacity: 0;
                            }
                        }
                        @keyframes loading-1{
                            100%{
                                transform:translate(40px);
                                opacity: 0;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            100%{
                                transform:translate(20px);
                                opacity: 1;
                            }
                        }
                        @keyframes loading-2{
                            100%{
                                transform:translate(20px);
                                opacity: 1;
                            }
                        }
                        @-webkit-keyframes loading-3{
                            100%{
                                transform:translate(20px);
                            }
                        }
                        @keyframes loading-3{
                            100%{
                                transform:translate(20px);
                            }
                        }
                    
License Terms