.loader-containers{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.7);
    z-index:999999;

    display:flex;
    justify-content:center;
    align-items:center;
}
/* HTML: <div class="loader"></div> */
.filter-loader {
width: 50px;
--b: 8px; 
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000 10%,#0baf9a) content-box;
-webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
        mask-composite: intersect;
animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}}