preloader style : demo 69

HTML

                        

CSS

                        .loader{
                            width: 100px;
                            height: 100px;
                            position: relative;
                            margin: 40px auto;
                        }
                        .loader > div{
                            background: transparent;
                            border: 4px solid transparent;
                            border-color: transparent transparent transparent #152861;
                            -webkit-border-radius: 100%;
                            -moz-border-radius: 100%;
                            border-radius: 100%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            -webkit-transform: translate"("-50%, -50%")";
                            -moz-transform: translate"("-50%, -50%")";
                            -ms-transform: translate"("-50%, -50%")";
                            -o-transform: translate"("-50%, -50%")";
                            transform: translate"("-50%, -50%")";
                            -webkit-transform: translate(-50%, -50%) rotate(0);
                            -moz-transform: translate(-50%, -50%) rotate(0);
                            -ms-transform: translate(-50%, -50%) rotate(0);
                            -o-transform: translate(-50%, -50%) rotate(0);
                            transform: translate(-50%, -50%) rotate(0);
                            -webkit-animation: loading 2s infinite ease-in-out;
                            -moz-animation: loading 2s infinite ease-in-out;
                            -o-animation: loading 2s infinite ease-in-out;
                            animation: loading 2s infinite ease-in-out;
                        }
                        .loader .loader-inner-1{
                            width: 20px;
                            height: 20px;
                            -webkit-animation-delay: 0.1s;
                            -moz-animation-delay: 0.1s;
                            -o-animation-delay: 0.1s;
                            animation-delay: 0.1s;
                        }
                        .loader .loader-inner-2{
                            width: 25px;
                            height: 25px;
                            -webkit-animation-delay: 0.2s;
                            -moz-animation-delay: 0.2s;
                            -o-animation-delay: 0.2s;
                            animation-delay: 0.2s;
                        }
                        .loader .loader-inner-3{
                            width: 30px;
                            height: 30px;
                            -webkit-animation-delay: 0.3s;
                            -moz-animation-delay: 0.3s;
                            -o-animation-delay: 0.3s;
                            animation-delay: 0.3s;
                        }
                        .loader .loader-inner-4{
                            width: 35px;
                            height: 35px;
                            -webkit-animation-delay: 0.4s;
                            -moz-animation-delay: 0.4s;
                            -o-animation-delay: 0.4s;
                            animation-delay: 0.4s;
                        }
                        .loader .loader-inner-5{
                            width: 40px;
                            height: 40px;
                            -webkit-animation-delay: 0.5s;
                            -moz-animation-delay: 0.5s;
                            -o-animation-delay: 0.5s;
                            animation-delay: 0.5s;
                        }
                        .loader .loader-inner-6{
                            width: 45px;
                            height: 45px;
                            -webkit-animation-delay: 0.6s;
                            -moz-animation-delay: 0.6s;
                            -o-animation-delay: 0.6s;
                            animation-delay: 0.6s;
                        }
                        .loader .loader-inner-7{
                            width: 50px;
                            height: 50px;
                            -webkit-animation-delay: 0.7s;
                            -moz-animation-delay: 0.7s;
                            -o-animation-delay: 0.7s;
                            animation-delay: 0.7s;
                        }
                        .loader .loader-inner-8{
                            width: 55px;
                            height: 55px;
                            -webkit-animation-delay: 0.8s;
                            -moz-animation-delay: 0.8s;
                            -o-animation-delay: 0.8s;
                            animation-delay: 0.8s;
                        }
                        .loader .loader-inner-9{
                            width: 60px;
                            height: 60px;
                            -webkit-animation-delay: 0.9s;
                            -moz-animation-delay: 0.9s;
                            -o-animation-delay: 0.9s;
                            animation-delay: 0.9s;
                        }
                        .loader .loader-inner-10{
                            width: 65px;
                            height: 65px;
                            -webkit-animation-delay: 1s;
                            -moz-animation-delay: 1s;
                            -o-animation-delay: 1s;
                            animation-delay: 1s;
                        }
                        @-webkit-keyframes loading{
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                                -moz-transform: translate(-50%, -50%) rotate(360deg);
                                -ms-transform: translate(-50%, -50%) rotate(360deg);
                                -o-transform: translate(-50%, -50%) rotate(360deg);
                                transform: translate(-50%, -50%) rotate(360deg);
                                border-color: transparent transparent #FFFA6B #DD480C;
                            }
                            75% {
                                border-color: #FFFA6B transparent transparent #DD480C;
                            }
                        }
                        @-moz-keyframes loading{
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                                -moz-transform: translate(-50%, -50%) rotate(360deg);
                                -ms-transform: translate(-50%, -50%) rotate(360deg);
                                -o-transform: translate(-50%, -50%) rotate(360deg);
                                transform: translate(-50%, -50%) rotate(360deg);
                                border-color: transparent transparent #FFFA6B #DD480C;
                            }
                            75% {
                                border-color: #FFFA6B transparent transparent #DD480C;
                            }
                        }
                        @-o-keyframes loading{
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                                -moz-transform: translate(-50%, -50%) rotate(360deg);
                                -ms-transform: translate(-50%, -50%) rotate(360deg);
                                -o-transform: translate(-50%, -50%) rotate(360deg);
                                transform: translate(-50%, -50%) rotate(360deg);
                                border-color: transparent transparent #FFFA6B #DD480C;
                            }
                            75% {
                                border-color: #FFFA6B transparent transparent #DD480C;
                            }
                        }
                        @keyframes loading{
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                                -moz-transform: translate(-50%, -50%) rotate(360deg);
                                -ms-transform: translate(-50%, -50%) rotate(360deg);
                                -o-transform: translate(-50%, -50%) rotate(360deg);
                                transform: translate(-50%, -50%) rotate(360deg);
                                border-color: transparent transparent #FFFA6B #DD480C;
                            }
                            75% {
                                border-color:#FFFA6B transparent transparent #DD480C;
                            }
                        }
                    
License Terms