preloader style : demo 259

HTML

                        

CSS

                        .loader {
                            width: 70px;
                            height: 70px;
                            margin: 50px auto;
                            transform-style: preserve-3d;
                            position: relative;
                            animation: animate 4.59s ease-in-out infinite;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            width:  50px;
                            height: 50px;
                            border: 15px solid #1B76FF;
                            border-radius: 50%;
                            position: absolute;
                            animation: animate_1 1.73s ease-in-out infinite both reverse;
                        }
                        .loader:after{
                            border-color: #0D47A1;
                            animation-delay: -0.86s;
                        }
                        @keyframes animate{
                            0%, 100%{ transform: rotateX(8.75deg) rotateY(35deg); }
                            50%{ transform: rotateX(35deg) rotateY(-35deg) rotate(180deg); }
                        }
                        @keyframes animate_1{
                            0%, 100%{ transform: translateZ(25px) rotateX(14deg); }
                            33%{ transform: translateZ(-25px) scale(0.4); }
                            66%{ transform: translateZ(-25px); }
                        }
                    
License Terms