preloader style : demo 38

HTML

                        

CSS

                        .loader{
                            width: 80px;
                            display: flex;
                            justify-content: center;
                            overflow: hidden;
                            margin: 40px auto;
                        }
                        .loader .loader-inner{
                            width: 10px;
                            height: 20px;
                            padding: 2px;
                            background-color: rgba(0, 0, 0, 0.3);
                            box-shadow: -15px 0 0 rgba(0, 0, 0, 0.3), -30px 0 0 rgba(0, 0, 0, 0.3), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.3);
                        }
                        .loader .box{
                            position: relative;
                            width: 100%;
                            height: 100%;
                            background-color: #f7eac8;
                            box-shadow: -15px 0 0 #f7eac8, 15px 0 0 #f7eac8;
                            animation: loading 1s steps(7, end) infinite;
                        }
                        @-webkit-keyframes loading{
                            0% {
                                transform: translatex(-45px);
                            }
                            100% {
                                transform: translatex(60px);
                            }
                        }
                        @keyframes loading{
                            0% {
                                transform: translatex(-45px);
                            }
                            100% {
                                transform: translatex(60px);
                            }
                        }
                    
License Terms