preloader style : demo 97

HTML

                        

CSS

                        .demo{ background: #2d3d48; }
                        .loader{
                            width: 270px;
                            height: 50px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 25px;
                            height: 25px;
                            position: absolute;
                            top: 20%;
                            -webkit-animation: loading-1 1s infinite ease-in-out;
                            animation: loading-1 1s infinite ease-in-out;
                        }
                        .loader .loader-inner:nth-child(1){
                            background: #d3aecf;
                            left: 40px;
                            z-index: 1;
                            -webkit-animation: loading-2 1s infinite ease-in-out;
                            animation: loading-2 1s infinite ease-in-out;
                        }
                        .loader .loader-inner:nth-child(2){
                            background: #758fea;
                            left: 80px;
                            z-index: 2;
                            -webkit-animation: loading-3 1s infinite ease-in-out;
                            animation: loading-3 1s infinite ease-in-out;
                        }
                        .loader .loader-inner:nth-child(3){
                            background: #91da5f;
                            left: 120px;
                            z-index: 5;
                            -webkit-animation: loading-4 1s infinite ease-in-out;
                            animation: loading-4 1s infinite ease-in-out;
                        }
                        .loader .loader-inner:nth-child(4){
                            background: #266f64;
                            left: 160px;
                            z-index: 3;
                            -webkit-animation: loading-5 1s infinite ease-in-out;
                            animation: loading-5 1s infinite ease-in-out;
                        }
                        .loader .loader-inner:nth-child(5){
                            background: #b2e07b;
                            left: 200px;
                            z-index: 4;
                            -webkit-animation: loading-6 1s infinite ease-in-out;
                            animation: loading-6 1s infinite ease-in-out;
                        }
                        @-webkit-keyframes loading-1{
                            50%{ border-radius: 50%; }
                        }
                        @keyframes loading-1{
                            50%{ border-radius: 50%; }
                        }
                        @-webkit-keyframes loading-2{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(80px) translateY(-15px) rotate(360deg);
                                transform: translateX(80px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @keyframes loading-2{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(80px) translateY(-15px) rotate(360deg);
                                transform: translateX(80px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(40px) translateY(-15px) rotate(360deg);
                                transform: translateX(40px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @keyframes loading-3{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(40px) translateY(-15px) rotate(360deg);
                                transform: translateX(40px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateY(-15px) rotate(360deg);
                                transform: translateY(-15px) rotate(360deg);
                            }
                        }
                        @keyframes loading-4{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateY(-15px) rotate(360deg);
                                transform: translateY(-15px) rotate(360deg);
                            }
                        }
                        @-webkit-keyframes loading-5{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(-40px) translateY(-15px) rotate(360deg);
                                transform: translateX(-40px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @keyframes loading-5{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(-40px) translateY(-15px) rotate(360deg);
                                transform: translateX(-40px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @-webkit-keyframes loading-6{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(-80px) translateY(-15px) rotate(360deg);
                                transform: translateX(-80px) translateY(-15px) rotate(360deg);
                            }
                        }
                        @keyframes loading-6{
                            50%{
                                width: 55px;
                                height: 55px;
                                border-radius: 50%;
                                background: #d9d18e;
                                opacity: .5;
                                -webkit-transform: translateX(-80px) translateY(-15px) rotate(360deg);
                                transform: translateX(-80px) translateY(-15px) rotate(360deg);
                            }
                        }
                    
License Terms