preloader style : demo 72

HTML

                        

CSS

                        .loader{
                            width: 30px;
                            height: 30px;
                            margin: 70px auto;
                        }
                        .loader span{
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background: #94ca71;
                            position: absolute;
                        }
                        .loader span:nth-child(1){
                            transform: translate(-50px,0);
                            animation: loading-1 1s linear infinite;
                        }
                        .loader span:nth-child(2){
                            background: #54478a;
                            transform: translate(50px,0);
                            animation: loading-2 1s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            25%{
                                z-index: 2;
                            }
                            50%{
                                transform:translate(50px,0) scale(1);
                            }
                            75%{
                                transform:translate(0,0) scale(0.75);
                            }
                            100%{
                                transform:translate(-50px,0) scale(1);
                            }
                        }
                        @keyframes loading-1{
                            25%{
                                z-index: 2;
                            }
                            50%{
                                transform:translate(50px,0) scale(1);
                            }
                            75%{
                                transform:translate(0,0) scale(0.75);
                            }
                            100%{
                                transform:translate(-50px,0) scale(1);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            25%{
                                transform:translate(0,0) scale(0.75);
                            }
                            50%{
                                transform:translate(-50px,0) scale(1);
                            }
                            75%{
                                z-index: 2;
                            }
                            100%{
                                transform:translate(50px,0) scale(1);
                            }
                        }
                        @keyframes loading-2{
                            25%{
                                transform:translate(0,0) scale(0.75);
                            }
                            50%{
                                transform:translate(-50px,0) scale(1);
                            }
                            75%{
                                z-index: 2;
                            }
                            100%{
                                transform:translate(50px,0) scale(1);
                            }
                        }
                    
License Terms