@layer base{
    :root{
        --loader_dim : 200px
       }
       
       .block-page{
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        z-index: 999999999999;
        top:0;
    }

    .spinner {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--loader_dim);
        height: var(--loader_dim);
        z-index: 999;
        
        top:calc(50% - (var(--loader_dim)/2));
        left :calc(50% - (var(--loader_dim)/2))
        
        
        }
        
        .spinner-sector {
        border-radius: 50%;
        position: absolute;
        width: 100%;
        height: 100%;
        border: 15px solid transparent;
     
        
        mix-blend-mode: overlay;
        }
        
        .spinner-text {
        animation: loading-opacity 3s ease-in-out infinite;
        font-size: 2em;
        color : snow
        }
        
        .spinner-sector-blue {
        animation: rotate 2s ease-out infinite;
        border-top: 15px solid lightblue;
        }
        
        .spinner-sector-red {
        animation: rotate 2.5s ease-in infinite;
        border-top: 15px solid lightcoral;
        
        }
        
        .spinner-sector-green {
        animation: rotate 1.5s ease-in-out infinite;
        border-top: 15px solid lightgreen;
        }
     
       
        
        @keyframes rotate {
        from { transform: rotate(0); }
        to { transform: rotate(360deg); }
        }
        
        @keyframes loading-opacity {
        0%, 100% {
            opacity: 1;
        }
        25%, 75% {
            opacity: .5;
        }
        50% {
            opacity: .1;
        }
        }





        .circle-loading{
            position: absolute;
            aspect-ratio: 1;
            border-radius: 50%;
            animation: circle 6s linear infinite;
           
           }
           .circle-loading .circle
           {
            --size : 50%;
            --offset : 200%;
            width:var(--size);
            aspect-ratio: 1;
            position: absolute ;
            border-radius: 50%;
            
    
            top:calc(var(--size) / 2);
            left : calc(var(--size) / 2)
           } 
    
           .circle-loading .circle:nth-of-type(1)
           {
            transform: translate(
                calc(cos(0deg) * var(--offset)),
                calc(sin(0deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(2)
           {
            transform: translate(
                calc(cos(45deg) * var(--offset)),
                calc(sin(45deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(3)
           {
            transform: translate(
                calc(cos(90deg) * var(--offset)),
                calc(sin(90deg) * var(--offset))
                );
           }
    
           
           .circle-loading .circle:nth-of-type(4)
           {
            transform: translate(
                calc(cos(135deg) * var(--offset)),
                calc(sin(135deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(5)
           {
            transform: translate(
                calc(cos(180deg) * var(--offset)),
                calc(sin(180deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(6)
           {
            transform: translate(
                calc(cos(225deg) * var(--offset)),
                calc(sin(225deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(7)
           {
            transform: translate(
                calc(cos(270deg) * var(--offset)),
                calc(sin(270deg) * var(--offset))
                );
           }
    
           .circle-loading .circle:nth-of-type(8)
           {
            transform: translate(
                calc(cos(315deg) * var(--offset)),
                calc(sin(315deg) * var(--offset))
                );
           }
    
           @keyframes circle{
            0%{
              transform:rotate(0deg)
                       
            
            }
            100%{
              transform:rotate(360deg)
                       
            }
          }
    
 
}