preloader style : demo 89

HTML

                        

CSS

                        .demo{ background: #336584; }
                        .loader{
                            width: 15%;
                            height: 140px;
                            padding: 30px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 80px;
                            height: 20px;
                            border-radius: 16px;
                            background: rgba(255, 255, 255, 0.4);
                            padding: 4px;
                            margin-top: -10px;
                            position: absolute;
                            top: 50%;
                        }
                        .loader .loader-inner:before{
                            content: "";
                            width: 20px;
                            height: 12px;
                            border-radius: 16px;
                            background: #fff;
                            position: absolute;
                            left: 0;
                            -webkit-animation: loading 1s infinite linear;
                            animation: loading 1s infinite linear;
                        }
                        @-webkit-keyframes loading{
                            50%{ left: 56px; }
                        }
                        @keyframes loading{
                            50%{ left: 56px; }
                        }
                    
License Terms