preloader style : demo 101

HTML

                        

CSS

                        .loader{
                            width: 86px;
                            height: 20px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 20px;
                            height: 20px;
                            position: absolute;
                            top: 0;
                        }
                        .loader .loader-inner:nth-child(1){
                            left: 0;
                            animation: loading-1 1.5s linear forwards infinite;
                        }
                        .loader .loader-inner:nth-child(2){
                            left: 22px;
                            animation: loading-2 1.5s linear forwards infinite;
                        }
                        .loader .loader-inner:nth-child(3){
                            left: 44px;
                            animation: loading-3 1.5s linear forwards infinite;
                        }
                        .loader .loader-inner:nth-child(4){
                            left: 66px;
                            animation: loading-4 1.5s linear forwards infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                background: #ff9f1c;
                                transform: translate(0, 0);
                            }
                            9.09091%{
                                transform: translate(0, calc(-100% - 2px));
                                background: #ff9f1c;
                            }
                            18.18182%{
                                transform: translate(calc(100% + 2px), calc(-100% - 2px));
                                background: #1c3586;
                            }
                            27.27273%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #1c3586;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                background: #ff9f1c;
                                transform: translate(0, 0);
                            }
                            9.09091%{
                                transform: translate(0, calc(-100% - 2px));
                                background: #ff9f1c;
                            }
                            18.18182%{
                                transform: translate(calc(100% + 2px), calc(-100% - 2px));
                                background: #1c3586;
                            }
                            27.27273%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #1c3586;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                background: #1c3586;
                                transform: translate(0, 0);
                            }
                            18.18182%{
                                transform: translate(0, 0);
                            }
                            27.27273%{
                                transform: translate(0, calc(100% + 2px));
                                background: #1c3586;
                            }
                            36.36364%{
                                transform: translate(calc(100% + 2px), calc(100% + 2px));
                                background: #6b983b;
                            }
                            45.45455%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #6b983b;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                background: #1c3586;
                                transform: translate(0, 0);
                            }
                            18.18182%{
                                transform: translate(0, 0);
                            }
                            27.27273%{
                                transform: translate(0, calc(100% + 2px));
                                background: #1c3586;
                            }
                            36.36364%{
                                transform: translate(calc(100% + 2px), calc(100% + 2px));
                                background: #6b983b;
                            }
                            45.45455%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #6b983b;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                background: #6b983b;
                                transform: translate(0, 0);
                            }
                            36.36364%{
                                transform: translate(0, 0);
                            }
                            45.45455%{
                                transform: translate(0, calc(-100% - 2px));
                                background: #6b983b;
                            }
                            54.54545%{
                                transform: translate(calc(100% + 2px), calc(-100% - 2px));
                                background: #d90429;
                            }
                            63.63636%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #d90429;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                background: #6b983b;
                                transform: translate(0, 0);
                            }
                            36.36364%{
                                transform: translate(0, 0);
                            }
                            45.45455%{
                                transform: translate(0, calc(-100% - 2px));
                                background: #6b983b;
                            }
                            54.54545%{
                                transform: translate(calc(100% + 2px), calc(-100% - 2px));
                                background: #d90429;
                            }
                            63.63636%{
                                transform: translate(calc(100% + 2px), 0);
                            }
                            100%{
                                background: #d90429;
                                transform: translate(calc(100% + 2px), 0);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            0%{
                                transform: translate(0, 0);
                                background: #d90429;
                            }
                            54.54545%{
                                transform: translate(0, 0);
                            }
                            63.63636%{
                                transform: translate(0, calc(100% + 2px));
                                background: #d90429;
                            }
                            72.72727%{
                                background: #6b983b;
                            }
                            81.81818%{
                                background: #1c3586
                            }
                            90.90909%{
                                transform: translate(calc(-300% - 6px), calc(100% + 2px));
                                background: #ff9f1c;
                            }
                            100%{
                                transform: translate(calc(-300% - 6px), 0);
                                background: #ff9f1c;
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                transform: translate(0, 0);
                                background: #d90429;
                            }
                            54.54545%{
                                transform: translate(0, 0);
                            }
                            63.63636%{
                                transform: translate(0, calc(100% + 2px));
                                background: #d90429;
                            }
                            72.72727%{
                                background: #6b983b;
                            }
                            81.81818%{
                                background: #1c3586
                            }
                            90.90909%{
                                transform: translate(calc(-300% - 6px), calc(100% + 2px));
                                background: #ff9f1c;
                            }
                            100%{
                                transform: translate(calc(-300% - 6px), 0);
                                background: #ff9f1c;
                            }
                        }
                    
License Terms