/* loder */
.sdLoder {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #ffffffce;
    z-index: 999999;
}

    .sdLoder .sdLoderInner {
        border-radius: .5rem;
        padding: 1rem;
        text-align: center;
        position: relative;
    }

.sdLoder2 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #e5e5e5bd;
    z-index: 1000;
}

    .sdLoder2 .sdLoderInner {
        border-radius: .5rem;
        padding: 1rem;
        text-align: center;
        position: relative;
    }

        .sdLoder .sdLoderInner .sdLoderImg {
            width: 3rem;
            -webkit-animation-name: loderColor;
            animation-name: loderColor;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            opacity: .5;
        }

        .sdLoder .sdLoderInner .sdLoderTxt {
            height: 3.5rem;
            line-height: 3.5rem;
            border-radius: 50%;
            font-size: .8rem;
            color: #111;
            font-weight: 400;
            white-space: nowrap;
        }

@-webkit-keyframes loderColor {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
}

@keyframes loderColor {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
}
 
.three-quarter-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #000;
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin .4s linear 0s infinite;
}
@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}


/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}

.loader-screen {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#f0f0f0 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}