preloader style : demo 192

HTML

                        

CSS

                        .loader{
                            width: 150px;
                            height: 150px;
                            background: #fff;
                            margin: 20px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 50%;
                            height: 100%;
                            background: #ff6740;
                            border: 5px solid rgba(0,0,0,0.5);
                            transform-origin: 100% 50%;
                            position: absolute;
                        }
                        .loader .box-1{
                            border-radius: 100% 0 0 100% / 50% 0 0 50%;
                            border-right: none;
                            z-index: 2;
                            animation: loading-1 5s linear infinite;
                        }
                        .loader .box-2{
                            border-radius: 0 100% 100% 0 / 0 50% 50% 0;
                            border-left: none;
                            left: 50%;
                            opacity: 0;
                            z-index: 1;
                            animation: loading-2 5s steps(1, end) infinite reverse;
                        }
                        .loader .box-3{
                            width: 50%;
                            height: 100%;
                            background: inherit;
                            position: absolute;
                            opacity: 1;
                            z-index: 3;
                            animation: loading-2 5s steps(1, end) infinite;
                        }
                        @keyframes loading-1{
                            0%{
                                transform: rotate(0deg);
                            }
                            100%{
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                opacity: 1;
                            }
                            50%,100%{
                                opacity: 0;
                            }
                        }
                    
License Terms