preloader style : demo 294

HTML

                        

CSS

                        .loader{
                            width: 180px;
                            height: 180px;
                            margin: 50px auto;
                            transform-style: preserve-3d;
                            transform: perspective(500px) rotatex(45deg);
                            position: relative;
                        }
                        .loader div{
                            border: 15px solid #ff4300;
                            border-radius: 50%;
                            box-shadow: 0 10px 0 #ff9872 , inset 0 10px 0 #ff9872;
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 40%;
                            left: 40%;
                            animation: animate 4.5s ease-in-out infinite;
                        }
                        .loader div:nth-child(1){ animation-delay: 0s; }
                        .loader div:nth-child(2){ animation-delay: 1.5s; }
                        .loader div:nth-child(3){ animation-delay: 3s; }
                        @keyframes animate{
                            0%{
                                width: 90%;
                                height: 90%;
                                transform: translateX(-50%) translateY(-50%) translatez(-100px);
                            }
                            25%{
                                width: 90%;
                                height: 90%;
                                transform: translateX(-50%) translateY(-50%) translatez(100px);
                            }
                            50%{
                                width: 35%;
                                height: 35%;
                                transform:translateX(-50%) translateY(-50%) translatez(100px);
                            }
                            75%{
                                width: 35%;
                                height: 35%;
                                transform:translateX(-50%) translateY(-50%) translatez(-100px);
                            }
                            100%{
                                width: 90%;
                                height: 90%;
                                transform:translateX(-50%) translateY(-50%) translatez(-100px);
                            }
                        }
                    
License Terms