preloader style : demo 179

HTML

                        

CSS

                        .demo{ background: #000022; }
                        .loader{
                            width: 250px;
                            height: 50px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 30px;
                            height: 30px;
                            background: #cf6917;
                            border-radius: 50%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            animation-name: loading-1;
                            animation-duration: 1.5s;
                            animation-iteration-count: infinite;
                            animation-direction: normal;
                        }
                        .loader .box-1{ animation-delay: 0s; }
                        .loader .box-2{ animation-delay: 0.15s; }
                        .loader .box-3{ animation-delay: 0.3s; }
                        .loader .box-4{ animation-delay: 0.45s; }
                        @keyframes loading-1{
                            0%{
                                left: 0;
                                background: #cf6917;
                            }
                            50%{
                                left: 430px;
                                background: #000022;
                            }
                            100%{
                                left: 0;
                                background: #cf6917;
                            }
                        }
                    
License Terms