preloader style : demo 43

HTML

                        

CSS

                        .loader {
                            width: 200px;
                            height: 37px;
                            border: 2px solid #b9607e;
                            background-color: #b6e0d1;
                            margin: 30px auto;
                            overflow: hidden;
                        }
                        .loader-inner {
                            width: 168px;
                            -moz-animation-name: loading;
                            -moz-animation-duration: 2.8s;
                            -moz-animation-iteration-count: infinite;
                            -moz-animation-direction: linear;
                            -webkit-animation-name: loading;
                            -webkit-animation-duration: 2.8s;
                            -webkit-animation-iteration-count: infinite;
                            -webkit-animation-direction: linear;
                            -ms-animation-name: loading;
                            -ms-animation-duration: 2.8s;
                            -ms-animation-iteration-count: infinite;
                            -ms-animation-direction: linear;
                            -o-animation-name: loading;
                            -o-animation-duration: 2.8s;
                            -o-animation-iteration-count: infinite;
                            -o-animation-direction: linear;
                            animation-name: loading;
                            animation-duration: 2.8s;
                            animation-iteration-count: infinite;
                            animation-direction: linear;
                        }
                        .line-1 {
                            width: 18px;
                            height: 120px;
                            float: left;
                            background-color: #3a9ad9;
                            margin-right: 17px;
                            margin-top: -28px;
                            -moz-transform: rotate(45deg);
                            -webkit-transform: rotate(45deg);
                            -ms-transform: rotate(45deg);
                            -o-transform: rotate(45deg);
                            transform: rotate(45deg);
                        }
                        @-moz-keyframes loading {
                            0% {
                                margin-left: -128px;
                                margin-top: -18px
                            }
                            100% {
                                margin-left: 340px;
                                margin-top: -18px
                            }
                        }
                        @-webkit-keyframes loading {
                            0% {
                                margin-left: -128px;
                                margin-top: -18px
                            }
                            100% {
                                margin-left: 340px;
                                margin-top: -18px
                            }
                        }
                        @-ms-keyframes loading {
                            0% {
                                margin-left: -128px;
                                margin-top: -18px
                            }
                            100% {
                                margin-left: 340px;
                                margin-top: -18px
                            }
                        }
                        @-o-keyframes loading {
                            0% {
                                margin-left: -128px;
                                margin-top: -18px
                            }
                            100% {
                                margin-left: 340px;
                                margin-top: -18px
                            }
                        }
                        @keyframes loading {
                            0% {
                                margin-left: -128px;
                                margin-top: -18px
                            }
                            100% {
                                margin-left: 340px;
                                margin-top: -18px
                            }
                        }
                    
License Terms