preloader style : demo 48

LOADING...

HTML

                        

LOADING...

CSS

                        .loader{
                            width: 70px;
                            height: 70px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader-inner{
                            position: absolute;
                            border-radius: 2px;
                            overflow: hidden;
                            perspective: 1000;
                            backface-visibility: hidden;
                        }
                        #loading1{
                            width: 53px;
                            height: 20px;
                            left: 20px;
                            transform: skew(-15deg, 0);
                            z-index: 1;
                        }
                        #loading2{
                            width: 33px;
                            height: 20px;
                            left: 20px;
                            top: 15px;
                            transform: skew(-15deg, 40deg)
                        }
                        #loading3{
                            width: 53px;
                            height: 20px;
                            top: 30px;
                            transform: skew(-15deg, 0)
                        }
                        .box{
                            background: #daa520;
                            width: 400%;
                            height: 100%;
                            position: absolute;
                            transform: translate3d(0px,0,0);
                            backface-visibility: hidden;
                        }
                        #loading1 .box{
                            animation: loading1 1.3s ease-in infinite  0s backwards;
                        }
                        #loading2 .box{
                            transform: translate3d(0px,0,0);
                            background: #a3873e;
                            animation: loading2 1.3s linear infinite  0.3s  backwards;
                        }
                        #loading3 .box{
                            animation : loading3 1.3s ease-out infinite  0.7s backwards;
                        }
                        .text{
                            font-size: 11px;
                            font-style: italic;
                            color: #daa520;
                            position:absolute;
                            left: -3px;
                            top: 55px;
                            font-family:Arial;
                            text-align:center;
                        }
                        @-webkit-keyframes loading1 {
                            from {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(-250px, 0, 0);
                                transform: translate3d(-250px, 0, 0);
                            }
                        }
                        @keyframes loading1 {
                            from {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(-250px, 0, 0);
                                transform: translate3d(-250px, 0, 0);
                            }
                        }
                        @-webkit-keyframes loading2 {
                            from {
                                -webkit-transform: translate3d(-160px, 0, 0);
                                transform: translate3d(-160px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                        }
                        @keyframes loading2 {
                            from {
                                -webkit-transform: translate3d(-160px, 0, 0);
                                transform: translate3d(-160px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                        }
                        @-webkit-keyframes loading3 {
                            from {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(-220px, 0, 0);
                                transform: translate3d(-220px, 0, 0);
                            }
                        }
                        @keyframes loading3 {
                            from {
                                -webkit-transform: translate3d(53px, 0, 0);
                                transform: translate3d(53px, 0, 0);
                            }
                            to {
                                -webkit-transform: translate3d(-220px, 0, 0);
                                transform: translate3d(-220px, 0, 0);
                            }
                        }
                    
License Terms