.cus-loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    color: #fff;
    font-size: 25px;
}

.cus-loader:before,
.cus-loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
}

.cus-loader:after {
    color: #FF3D00;
    transform: rotateY(70deg);
    animation-delay: .4s;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

@keyframes rotateccw {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes spin {
    0%,
    100% {
        box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
        box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
        box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
        box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
        box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
        box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
        box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
        box-shadow: .2em -.2em 0 0 currentcolor;
    }
}

/*another loader*/

.cus-loader1 {
    width: 85px;
    height: 50px;
    --g1:conic-gradient(from  90deg at left   3px top   3px,#0000 90deg,#fff 0);
    --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,#fff 0);
    background: var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
    background-position: left,center,right;
    background-repeat: no-repeat;
    animation: l10 1s infinite alternate;
}
@keyframes l10 {
    0%,
    2%   {background-size:25px 50% ,25px 50% ,25px 50%}
    20%  {background-size:25px 25% ,25px 50% ,25px 50%}
    40%  {background-size:25px 100%,25px 25% ,25px 50%}
    60%  {background-size:25px 50% ,25px 100%,25px 25%}
    80%  {background-size:25px 50% ,25px 50% ,25px 100%}
    98%,
    100% {background-size:25px 50% ,25px 50% ,25px 50%}
}


.cus-loader2 {
    width: 45px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#000 0 0);
    background:
        var(--c) 0%   50%,
        var(--c) 50%  50%,
        var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: l1 1s infinite linear;
}
@keyframes l1 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    33% {background-size: 20% 10% ,20% 100%,20% 100%}
    50% {background-size: 20% 100%,20% 10% ,20% 100%}
    66% {background-size: 20% 100%,20% 100%,20% 10% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}


.cus-loader3 {
    width: 40px;
    aspect-ratio: 1;
    display: grid;
}
.cus-loader3::before,
.cus-loader3::after {
    content: "";
    grid-area: 1/1;
    --c:no-repeat linear-gradient(#FFFFFF 0 0);
    background:
        var(--c) 0 0,
        var(--c) 100% 0,
        var(--c) 100% 100%,
        var(--c) 0 100%;
    animation:
        l10-1 2s infinite linear,
        l10-2 2s infinite linear;
}
.cus-loader3::after {
    margin: 25%;
    transform: scale(-1);
}
@keyframes l10-1 {
    0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
    12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
    25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
    37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
    45%,
    55%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
    62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
    75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
    87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
    100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes l10-2 {
    0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
    50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
}