preloader style : demo 94

HTML

                        

CSS

                        .demo{ background: #4b4673; }
                        .loader{
                            width: 300px;
                            height: 120px;
                            margin: 60px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 180px;
                            height: 60px;
                            margin: -30px -90px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                        }
                        .loader .box{
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            background: #2ecc71;
                            box-shadow: 0 0 2px #000;
                            margin: -6px -6px;
                            position: absolute;
                            top: 50%;
                            left: 0;
                        }
                        .loader .loader-inner2{
                            width: 120px;
                            height: 120px;
                            border-radius: 50%;
                            position: absolute;
                            -webkit-animation: loading-1 4s infinite linear;
                            animation: loading-1 4s infinite linear;
                        }
                        .loader .loader-inner2 .box{
                            -webkit-animation: loading-7 4s infinite linear;
                            animation: loading-7 4s infinite linear;
                        }
                        .loader .loader-inner2:last-child{
                            right: 0;
                            -webkit-animation: loading-2 4s infinite linear;
                            animation: loading-2 4s infinite linear;
                        }
                        .loader .loader-inner2:last-child .box{
                            left: 100%;
                        }
                        .loader .loader-inner .box:nth-child(1){
                            left: 0;
                            background: #ff3033;
                            -webkit-animation: loading-3 4s infinite linear;
                            animation: loading-3 4s infinite linear;
                        }
                        .loader .loader-inner .box:nth-child(2){
                            left: 33.33333%;
                            background: #ffd500;
                            -webkit-animation: loading-4 4s infinite linear;
                            animation: loading-4 4s infinite linear;
                        }
                        .loader .loader-inner .box:nth-child(3){
                            left: 66.66667%;
                            background: #ffd500;
                            -webkit-animation: loading-5 4s infinite linear;
                            animation: loading-5 4s infinite linear;
                        }
                        .loader .loader-inner .box:nth-child(4){
                            left: 100%;
                            background: #ff3033;
                            -webkit-animation: loading-6 4s infinite linear;
                            animation: loading-6 4s infinite linear;
                        }
                        @-webkit-keyframes loading-1{
                            20% {
                                -webkit-transform: translate(0, 0) rotate(-0.5turn);
                                -ms-transform: translate(0, 0) rotate(-0.5turn);
                                transform: translate(0, 0) rotate(-0.5turn);
                            }
                            20.00001% {
                                -webkit-transform: translate(120px, 0) rotate(0);
                                -ms-transform: translate(120px, 0) rotate(0);
                                transform: translate(120px, 0) rotate(0);
                            }
                            40% {
                                -webkit-transform: translate(120px, 0) rotate(0.5turn);
                                -ms-transform: translate(120px, 0) rotate(0.5turn);
                                transform: translate(120px, 0) rotate(0.5turn);
                            }
                            40.00001% {
                                -webkit-transform: translate(240px, 0) rotate(0);
                                -ms-transform: translate(240px, 0) rotate(0);
                                transform: translate(240px, 0) rotate(0);
                            }
                            60% {
                                -webkit-transform: translate(240px, 0) rotate(-1turn);
                                -ms-transform: translate(240px, 0) rotate(-1turn);
                                transform: translate(240px, 0) rotate(-1turn);
                            }
                            60.00001% {
                                -webkit-transform: translate(120px, 0) rotate(-0.5turn);
                                -ms-transform: translate(120px, 0) rotate(-0.5turn);
                                transform: translate(120px, 0) rotate(-0.5turn);
                            }
                            80% {
                                -webkit-transform: translate(120px, 0) rotate(0);
                                -ms-transform: translate(120px, 0) rotate(0);
                                transform: translate(120px, 0) rotate(0);
                            }
                            80.00001% {
                                -webkit-transform: translate(0, 0) rotate(0.5turn);
                                -ms-transform: translate(0, 0) rotate(0.5turn);
                                transform: translate(0, 0) rotate(0.5turn);
                            }
                            100% {
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-1{
                            20% {
                                -webkit-transform: translate(0, 0) rotate(-0.5turn);
                                -ms-transform: translate(0, 0) rotate(-0.5turn);
                                transform: translate(0, 0) rotate(-0.5turn);
                            }
                            20.00001% {
                                -webkit-transform: translate(120px, 0) rotate(0);
                                -ms-transform: translate(120px, 0) rotate(0);
                                transform: translate(120px, 0) rotate(0);
                            }
                            40% {
                                -webkit-transform: translate(120px, 0) rotate(0.5turn);
                                -ms-transform: translate(120px, 0) rotate(0.5turn);
                                transform: translate(120px, 0) rotate(0.5turn);
                            }
                            40.00001% {
                                -webkit-transform: translate(240px, 0) rotate(0);
                                -ms-transform: translate(240px, 0) rotate(0);
                                transform: translate(240px, 0) rotate(0);
                            }
                            60% {
                                -webkit-transform: translate(240px, 0) rotate(-1turn);
                                -ms-transform: translate(240px, 0) rotate(-1turn);
                                transform: translate(240px, 0) rotate(-1turn);
                            }
                            60.00001% {
                                -webkit-transform: translate(120px, 0) rotate(-0.5turn);
                                -ms-transform: translate(120px, 0) rotate(-0.5turn);
                                transform: translate(120px, 0) rotate(-0.5turn);
                            }
                            80% {
                                -webkit-transform: translate(120px, 0) rotate(0);
                                -ms-transform: translate(120px, 0) rotate(0);
                                transform: translate(120px, 0) rotate(0);
                            }
                            80.00001% {
                                -webkit-transform: translate(0, 0) rotate(0.5turn);
                                -ms-transform: translate(0, 0) rotate(0.5turn);
                                transform: translate(0, 0) rotate(0.5turn);
                            }
                            100% {
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            20% {
                                -webkit-transform: translate(0, 0) rotate(-0.5turn);
                                -ms-transform: translate(0, 0) rotate(-0.5turn);
                                transform: translate(0, 0) rotate(-0.5turn);
                            }
                            20.00001% {
                                -webkit-transform: translate(-120px, 0) rotate(0);
                                -ms-transform: translate(-120px, 0) rotate(0);
                                transform: translate(-120px, 0) rotate(0);
                            }
                            40% {
                                -webkit-transform: translate(-120px, 0) rotate(0.5turn);
                                -ms-transform: translate(-120px, 0) rotate(0.5turn);
                                transform: translate(-120px, 0) rotate(0.5turn);
                            }
                            40.00001% {
                                -webkit-transform: translate(-240px, 0) rotate(0);
                                -ms-transform: translate(-240px, 0) rotate(0);
                                transform: translate(-240px, 0) rotate(0);
                            }
                            60% {
                                -webkit-transform: translate(-240px, 0) rotate(-1turn);
                                -ms-transform: translate(-240px, 0) rotate(-1turn);
                                transform: translate(-240px, 0) rotate(-1turn);
                            }
                            60.00001% {
                                -webkit-transform: translate(-120px, 0) rotate(-0.5turn);
                                -ms-transform: translate(-120px, 0) rotate(-0.5turn);
                                transform: translate(-120px, 0) rotate(-0.5turn);
                            }
                            80% {
                                -webkit-transform: translate(-120px, 0) rotate(0);
                                -ms-transform: translate(-120px, 0) rotate(0);
                                transform: translate(-120px, 0) rotate(0);
                            }
                            80.00001% {
                                -webkit-transform: translate(0, 0) rotate(0.5turn);
                                -ms-transform: translate(0, 0) rotate(0.5turn);
                                transform: translate(0, 0) rotate(0.5turn);
                            }
                            100% {
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-2{
                            20% {
                                -webkit-transform: translate(0, 0) rotate(-0.5turn);
                                -ms-transform: translate(0, 0) rotate(-0.5turn);
                                transform: translate(0, 0) rotate(-0.5turn);
                            }
                            20.00001% {
                                -webkit-transform: translate(-120px, 0) rotate(0);
                                -ms-transform: translate(-120px, 0) rotate(0);
                                transform: translate(-120px, 0) rotate(0);
                            }
                            40% {
                                -webkit-transform: translate(-120px, 0) rotate(0.5turn);
                                -ms-transform: translate(-120px, 0) rotate(0.5turn);
                                transform: translate(-120px, 0) rotate(0.5turn);
                            }
                            40.00001% {
                                -webkit-transform: translate(-240px, 0) rotate(0);
                                -ms-transform: translate(-240px, 0) rotate(0);
                                transform: translate(-240px, 0) rotate(0);
                            }
                            60% {
                                -webkit-transform: translate(-240px, 0) rotate(-1turn);
                                -ms-transform: translate(-240px, 0) rotate(-1turn);
                                transform: translate(-240px, 0) rotate(-1turn);
                            }
                            60.00001% {
                                -webkit-transform: translate(-120px, 0) rotate(-0.5turn);
                                -ms-transform: translate(-120px, 0) rotate(-0.5turn);
                                transform: translate(-120px, 0) rotate(-0.5turn);
                            }
                            80% {
                                -webkit-transform: translate(-120px, 0) rotate(0);
                                -ms-transform: translate(-120px, 0) rotate(0);
                                transform: translate(-120px, 0) rotate(0);
                            }
                            80.00001% {
                                -webkit-transform: translate(0, 0) rotate(0.5turn);
                                -ms-transform: translate(0, 0) rotate(0.5turn);
                                transform: translate(0, 0) rotate(0.5turn);
                            }
                            100% {
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%, 39% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            40% {
                                background:#ff3033;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            45%, 59% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            60% {
                                background:#ffd500;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            65% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-3{
                            0%, 39% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            40% {
                                background:#ff3033;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            45%, 59% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            60% {
                                background:#ffd500;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            65% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            0%, 19% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            20% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            25%, 79% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            80% {
                                background:#ff3033;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            85% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-4{
                            0%, 19% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            20% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            25%, 79% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            80% {
                                background:#ff3033;
                                -webkit-transform: translate(0, -5px) rotate(0);
                                -ms-transform: translate(0, -5px) rotate(0);
                                transform: translate(0, -5px) rotate(0);
                            }
                            85% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-5{
                            0%, 19% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            20% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            25%, 79% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            80% {
                                background: #ff3033;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            85% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-5{
                            0%, 19% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            20% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            25%, 79% {
                                background:#2ecc71;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            80% {
                                background: #ff3033;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            85% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-6{
                            0%, 39% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            40% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            45%, 59% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            60% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            65% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @keyframes loading-6{
                            0%, 39% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            40% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            45%, 59% {
                                background:#ff3033;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                            60% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 5px) rotate(0);
                                -ms-transform: translate(0, 5px) rotate(0);
                                transform: translate(0, 5px) rotate(0);
                            }
                            65% {
                                background:#ffd500;
                                -webkit-transform: translate(0, 0) rotate(0);
                                -ms-transform: translate(0, 0) rotate(0);
                                transform: translate(0, 0) rotate(0);
                            }
                        }
                        @-webkit-keyframes loading-7{
                            0%, 19% {
                                background:#2ecc71;
                            }
                            20%, 39% {
                                background:#ff3033;
                            }
                            40%, 59% {
                                background: #ffd500;
                            }
                            60%, 79% {
                                background: #ff3033;
                            }
                            80% {
                                background:#2ecc71;
                            }
                        }
                        @keyframes loading-7{
                            0%, 19% {
                                background:#2ecc71;
                            }
                            20%, 39% {
                                background:#ff3033;
                            }
                            40%, 59% {
                                background: #ffd500;
                            }
                            60%, 79% {
                                background: #ff3033;
                            }
                            80% {
                                background:#2ecc71;
                            }
                        }
                    
License Terms