preloader style : demo 211

                        :root{
                            --page-color: #fff;
                            --loader-color: #1B1464;
                            --loader-inner-color: radial-gradient(#A3CB38,#009432,#009432);
                            --loader-size: 20px;
                            --loader-inner-size: 35px;
                        }
                        .demo{
                            background-color: var(--page-color);
                            display: flex;
                            justify-content: center;
                        }
                        .preloader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto 0;
                            position: relative;
                            animation: rotate 4.8s linear infinite;
                        }
                        .loader{
                            width: 100%;
                            height: 100%;
                            border: var(--loader-size) solid var(--loader-color);
                            border-radius: 100%;
                            position: relative;
                            z-index: 2;
                        }
                        .loader-inner-1{
                            width: 80%;
                            height: 80%;
                            position: absolute;
                            top: -20%;
                            left: -20%;
                        }
                        .loader-inner-1:after{
                            content: '';
                            background: var(--loader-inner-color);
                            width: var(--loader-inner-size);
                            height: var(--loader-inner-size);
                            border-radius: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .loader-inner-1:nth-child(1){
                            animation: rotate 1.6s -0.5333333333s linear infinite, sphere-anim 1.6s -0.5333333333s linear infinite;
                        }
                        .loader-inner-1:nth-child(2){
                            animation: rotate 1.6s -1.0666666667s linear infinite, sphere-anim 1.6s -1.0666666667s linear infinite;
                        }
                        .loader-inner-1:nth-child(3){
                            animation: rotate 1.6s -1.6s linear infinite, sphere-anim 1.6s -1.6s linear infinite;
                        }
                        @keyframes rotate{
                            from { transform: rotate(0); }
                            to { transform: rotate(360deg); }
                        }
                        @keyframes sphere-anim{
                            from { z-index: 1; }
                            to { z-index: 2; }
                        }