preloader style : demo 135

HTML

                        

CSS

                        .loader{
                            width: 150px;
                            height: 100px;
                            margin: 50px auto;
                            overflow: hidden;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 49px;
                            height: 49px;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            box-shadow: 0 0 8px 1px rgba(0,0,0,0.25);
                            border-top-left-radius: 50%;
                            border-top-right-radius: 50%;
                            background-color: rgb(241,100,35);
                            background-image: linear-gradient(rgb(241,100,35), rgb(244,148,100));
                            background-image: -webkit-linear-gradient(rgb(241,100,35), rgb(244,148,100));
                            -webkit-animation: loading-1 2.3s ease-in-out infinite alternate;
                            animation: loading-1 2.3s ease-in-out infinite alternate;
                        }
                        .loader .loader-inner:after{
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            position: absolute;
                            bottom: -19px;
                            background-color: rgb(241,100,35);
                            background-image: -webkit-linear-gradient(rgb(241,100,35), rgb(244,148,100));
                            background-image: linear-gradient(rgb(241,100,35), rgb(244,148,100));
                            box-shadow: 0 0 8px 1px rgba(0,0,0,0.25);
                            -webkit-animation: loading-2 2.3s ease-in-out infinite alternate, loading-1 2.3s ease-in-out infinite alternate;
                            animation: loading-2 2.3s ease-in-out infinite alternate, loading-1 2.3s ease-in-out infinite alternate;
                        }
                        @-webkit-keyframes loading-1{
                            from{ -webkit-transform: rotate(45deg); }
                            to{ -webkit-transform: rotate(-45deg); }
                        }
                        @keyframes loading-1{
                            from{ transform: rotate(45deg); }
                            to{ transform: rotate(-45deg); }
                        }
                        @-webkit-keyframes loading-2{
                            from{ left: 0; }
                            to{ left: calc(100% - 49px / 5); }
                        }
                        @keyframes loading-2{
                            from{ left: 0; }
                            to{ left: calc(100% - 49px / 5); }
                        }
                    
License Terms