preloader style : demo 146

HTML

                        

CSS

                        .demo{ background: #3d405b; }
                        .loader{
                            width: 195px;
                            height: 30px;
                            margin: 60px auto;
                            position: relative;
                            transform: rotate(180deg);
                        }
                        .loader .box-1,
                        .loader .box-2{
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            background: #f4d761;
                            position: absolute;
                            top: 0;
                            -webkit-animation: loading-1 0.46s ease infinite;
                            animation: loading-1 0.46s ease infinite;
                        }
                        .loader .box-2{
                            -webkit-animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s;
                            animation: loading-2 0.46s ease infinite 3.45s, loading-3 1.15s ease forwards 5.75s;
                        }
                        .loader .box-1:nth-child(1){
                            left: 14.28571%;
                            animation-delay: 0.29s;
                        }
                        .loader .box-1:nth-child(2){
                            left: 28.57143%;
                            animation-delay: 0.58s;
                        }
                        .loader .box-1:nth-child(3){
                            left: 42.85714%;
                            animation-delay: 0.86s;
                        }
                        .loader .box-1:nth-child(4){
                            left: 57.14286%;
                            animation-delay: 1.15s;
                        }
                        .loader .box-1:nth-child(5){
                            left: 71.42857%;
                            animation-delay: 1.44s;
                        }
                        .loader .box-1:nth-child(6){
                            left: 85.71429%;
                            animation-delay: 1.73s;
                        }
                        .loader .box-1:nth-child(7){
                            left: 100%;
                            animation-delay: 2.01s;
                        }
                        .loader .box-2:nth-child(1){
                            left: 14.28571%;
                            animation-delay: 0.29s;
                        }
                        .loader .box-2:nth-child(2){
                            left: 28.57143%;
                            animation-delay: 0.58s;
                        }
                        .loader .box-2:nth-child(3){
                            left: 42.85714%;
                            animation-delay: 0.86s;
                        }
                        .loader .box-2:nth-child(4){
                            left: 57.14286%;
                            animation-delay: 1.15s;
                        }
                        .loader .box-2:nth-child(5){
                            left: 71.42857%;
                            animation-delay: 1.44s;
                        }
                        .loader .box-2:nth-child(6){
                            left: 85.71429%;
                            animation-delay: 1.73s;
                        }
                        .loader .box-2:nth-child(7){
                            left: 100%;
                            animation-delay: 2.01s;
                        }
                        @-webkit-keyframes loading-1{
                            from{ top: 0; }
                            to{
                                top: 39px;
                                transform: scale(0.75);
                                z-index: 1;
                                opacity: 0;
                            }
                        }
                        @keyframes loading-1{
                            from{ top: 0; }
                            to{
                                top: 39px;
                                transform: scale(0.75);
                                z-index: 1;
                                opacity: 0;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            from{
                                top: 39px;
                                transform: scale(0.75);
                                z-index: 2;
                            }
                            to{ top: 0; }
                        }
                        @keyframes loading-2{
                            from{
                                top: 39px;
                                transform: scale(0.75);
                                z-index: 2;
                            }
                            to{ top: 0; }
                        }
                        @-webkit-keyframes loading-3{
                            from{ top: 0; }
                            to{ top: 0; }
                        }
                        @keyframes loading-3{
                            from{ top: 0; }
                            to{ top: 0; }
                        }
                    
License Terms