.processing-payment-loader {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 10px solid;
    border-color: #7c77b9 #7c77b9 transparent;
    box-sizing: border-box;
    animation: rotation 1.8s linear infinite;
}

    .processing-payment-loader::after,
    .processing-payment-loader::before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        transform-origin: center center;
    }

    .processing-payment-loader::after {
        width: 88px;
        height: 88px;
        border: 7px solid;
        border-color: transparent #7c77b9cc #7c77b9cc;
        animation: rotationBack 0.9s linear infinite;
    }

    .processing-payment-loader::before {
        width: 48px;
        height: 48px;
        border: 4px solid;
        border-color: #7c77b9cc #7c77b9cc transparent;
        animation: rotation 4.5s linear infinite;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* ALTERNATE LOADER */
.loader-alt {
    animation: rotate 1s infinite;
    height: 40px;
    width: 40px;
}

    .loader-alt::before,
    .loader-alt::after {
        content: "";
        display: block;
        height: 10px;
        width: 10px;
    }

    .loader-alt::before {
        animation: box1 1s infinite;
        background-color: var(--mud-palette-tertiary);
        box-shadow: 20px 0 0 var(--mud-palette-secondary);
        margin-bottom: 10px;
    }

    .loader-alt::after {
        animation: box2 1s infinite;
        background-color: var(--mud-palette-secondary);
        box-shadow: 20px 0 0 var(--mud-palette-tertiary);
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.8)
    }

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes box1 {
    0% {
        box-shadow: 20px 0 0 var(--mud-palette-secondary);
    }

    50% {
        box-shadow: 0 0 0 var(--mud-palette-secondary);
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 20px 0 0 var(--mud-palette-secondary);
        margin-bottom: 10px;
    }
}

@keyframes box2 {
    0% {
        box-shadow: 20px 0 0 var(--mud-palette-tertiary);
    }

    50% {
        box-shadow: 0 0 0 var(--mud-palette-tertiary);
        margin-top: -10px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 20px 0 0 var(--mud-palette-tertiary);
        margin-top: 0;
    }
}

.loader-spec {
    width: 40px;
    height: 20px;
    --c: no-repeat radial-gradient(farthest-side, var(--mud-palette-tertiary) 93%, #0000);
    background: var(--c) 0 0, var(--c) 50% 0;
    background-size: 8px 8px;
    position: relative;
    clip-path: inset(-200% -100% 0 0);
    animation: l6-0 1.5s linear infinite;
}

    .loader-spec:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 12px;
        background: var(--mud-palette-primary);
        left: -16px;
        top: 0;
        animation: l6-1 1.5s linear infinite, l6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
    }

    .loader-spec:after {
        content: "";
        position: absolute;
        inset: 0 0 auto auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--mud-palette-tertiary);
        animation: l6-3 1.5s linear infinite;
    }

@keyframes l6-0 {
    0%,30% {
        background-position: 0 0,50% 0
    }

    33% {
        background-position: 0 100%,50% 0
    }

    41%,63% {
        background-position: 0 0,50% 0
    }

    66% {
        background-position: 0 0,50% 100%
    }

    74%,100% {
        background-position: 0 0,50% 0
    }
}

@keyframes l6-1 {
    90% {
        transform: translateY(0)
    }

    95% {
        transform: translateY(15px)
    }

    100% {
        transform: translateY(15px);
        left: calc(100% - 8px)
    }
}

@keyframes l6-2 {
    100% {
        top: -0.1px
    }
}

@keyframes l6-3 {
    0%,80%,100% {
        transform: translate(0)
    }

    90% {
        transform: translate(26px)
    }
}

/* RECEIPT LOADER */
.receipt-loader {
    width: 50px;
    --b: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #7c77b9;
    -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: l5 1s infinite;
}

@keyframes l5 {
    to {
        transform: rotate(.5turn)
    }
}

/* GEAR LOADER */
.loader-gears {
    width: 60px;
    height: 40px;
    position: relative;
    display: inline-block;
    --base-color: var(--mud-palette-white); /*use your base color*/
}

    .loader-gears::before {
        content: '';
        left: 0;
        top: 0;
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary);
        background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: gearRotationBack 3s linear infinite;
    }

    .loader-gears::after {
        content: '';
        left: 35px;
        top: 15px;
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary);
        background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
        background-repeat: no-repeat;
        box-sizing: border-box;
        animation: gearRotationBack 4s linear infinite reverse;
    }

@keyframes gearRotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}