preloader style : demo 113

HTML

                        

CSS

                        .demo{ background: #8b8848; }
                        .loader{
                            width: 100px;
                            height: 50px;
                            margin: 50px auto;
                        }
                        .loader .loader-inner{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background: rgba(255,255,255,0.8);
                            box-shadow: 30px 0 0 0 rgba(255,255,255,0.8);
                            margin: 0 auto;
                            position: relative;
                        }
                        .loader .loader-inner:after{
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #8b8848;
                            box-shadow: 30px 0 0 0 #8b8848;
                            position: absolute;
                            top: 8px;
                            left: 9px;
                            -webkit-animation: loading-1 2s linear infinite alternate;
                            animation: loading-1 2s linear infinite alternate;
                        }
                        @-webkit-keyframes loading-1{
                            0%{left: 9px;}
                            100%{left: 1px;}
                        }
                        @keyframes loading-1{
                            0%{left: 9px;}
                            100%{left: 1px;}
                        }
                    
License Terms