preloader style : demo 266

HTML

                        

CSS

                        .loader{
                            background: #fff;
                            width: 120px;
                            height: 120px;
                            margin: 50px auto 0;
                            border-radius: 0px 80% 0px 100% / 0px 80% 0px 100%;
                            transform: rotate(-45deg);
                            position: relative;
                            animation: eye-open 1.7s infinite;
                        }
                        .loader:before{
                            content: '';
                            background: #00a8ff;
                            width: 40%;
                            height: 40%;
                            border-radius: 100%;
                            position: absolute;
                            top: 29%;
                            right: 29%;
                            animation: eye-roll 1.7s ease-in infinite;
                        }
                        @keyframes eye-open{
                            0%, 10%{ border-radius: 0 90% 0 90% / 0 90% 0 90%; }
                            15%{ border-radius: 0 100% 0 100% / 0 100% 0 100%; }
                            20%, 30%{ border-radius: 0 90% 0 90% / 0 90% 0 90%; }
                            60%{ border-radius: 0 70% 0 90% / 0 80% 0 90%; }
                            75%, 80%{ border-radius: 0 100% 0 90% / 0 100% 0 90%; }
                            95%{ border-radius: 0 90% 0 90% / 0 70% 0 90%; }
                            100%{ border-radius: 0 90% 0 90% / 0 90% 0 90%; }
                        }
                        @keyframes eye-roll{
                            0%, 30%{
                                border-radius: 100%;
                                transform-origin: 0% 20%;
                                transform: rotate(0deg);
                            }
                            55%, 90%{ border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%; }
                            100%{
                                border-radius: 100%;
                                transform-origin: 80% 100%;
                                transform: rotate(-360deg);
                            }
                        }
                    
License Terms