preloader style : demo 154

HTML

                        

CSS

                        .loader{
                            width: 200px;
                            height: 90px;
                            margin: 60px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            position: absolute;
                            margin-top: 22%;
                            margin-left: 50%;
                            transform: translate(-50%, -50%);
                        }
                        .loader .loader-inner:before{
                            content: "";
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: transparent;
                            box-shadow: 0 0 0 3px #1c5770, 0 0 0 17px #03b5aa,-3px -3px 0 #1c5770 inset;
                            position: absolute;
                            left: 0;
                            z-index: 1;
                        }
                        .loader .loader-inner:after{
                            content: "";
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background: #ffb03b;
                            box-shadow:-7px -7px 0 #cc8c2c inset;
                            position: absolute;
                            top: 10px;
                            left: 80px;
                            z-index: -1;
                            -webkit-animation: loading-1 3s linear infinite;
                            animation: loading-1 3s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0% {width:30px;height:30px;left:15px;z-index:10;}
                            13% {width:40px;height:40px;}
                            22% {left:-56px;}
                            23% {left:-57px;}
                            24% {width:30px;height:30px;z-index:10;}
                            25% {left:-60px;z-index: -10;}
                            27% {left:-57px;}
                            28% {left:-56px;}
                            38% {width:20px;height:20px;}
                            49% {width:30px;height:30px;z-index:-10;}
                            50% {left:15px;z-index: 10;}
                            64% {width:40px;height:40px;}
                            72% {left:86px;}
                            73% {left:87px;}
                            74% {z-index:10;}
                            75% {width:30px;height:30px;left:90px;z-index:-10;}
                            77% {left:87px}
                            78% {left:86px}
                            89% {width:20px;height:20px;}
                            99% {z-index:-10;}
                            100% {width:30px;height:30px;left:15px;z-index:10;}
                        }
                        @keyframes loading-1{
                            0% {width:30px;height:30px;left:15px;z-index:10;}
                            13% {width:40px;height:40px;}
                            22% {left:-56px;}
                            23% {left:-57px;}
                            24% {width:30px;height:30px;z-index:10;}
                            25% {left:-60px;z-index: -10;}
                            27% {left:-57px;}
                            28% {left:-56px;}
                            38% {width:20px;height:20px;}
                            49% {width:30px;height:30px;z-index:-10;}
                            50% {left:15px;z-index: 10;}
                            64% {width:40px;height:40px;}
                            72% {left:86px;}
                            73% {left:87px;}
                            74% {z-index:10;}
                            75% {width:30px;height:30px;left:90px;z-index:-10;}
                            77% {left:87px}
                            78% {left:86px}
                            89% {width:20px;height:20px;}
                            99% {z-index:-10;}
                            100% {width:30px;height:30px;left:15px;z-index:10;}
                        }
                    
License Terms