
.btn, .mw-ui-btn{
    .mw-spinner{
        position: absolute;
    }
}
.mw-spinner{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    z-index: 1;
    svg {
        -webkit-animation: mw-spinnerrotate 2s linear infinite;
        animation: mw-spinnerrotate 2s linear infinite;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
     circle {
        stroke-linecap: round;
        -webkit-animation: mw-spinnerdash 1.5s ease-in-out infinite;
        animation: mw-spinnerdash 1.5s ease-in-out infinite;
    }
    &.mw-spinner-mode-append{
        margin-inline-start: 8px;
    }
    &.mw-spinner-mode-prepend{
        margin-inline-end: 8px;
    }
    .mw-spinner-checkmark-check{
        display: none;
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        fill: none;
        stroke: #ffffff;
        stroke-width: 2;
     }
    &.mw-spinner-state-done{


        .mw-spinner-checkmark-check{
            display: block;
            animation: mw-spinner-checkmark-check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0s forwards;

        }
        svg, circle {
            -webkit-animation: none;
            animation: none;
            transition: .3s;
        }
        circle{
            fill: #7ac142;
            stroke: #7ac142 !important;
        }
    }
}

@keyframes mw-spinner-checkmark-check-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes mw-spinnerrotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes mw-spinnerrotate {
    100% {
        -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
    }
}
@-webkit-keyframes mw-spinnerdash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
@keyframes mw-spinnerdash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.mw-spinner-decorate{
    position: relative;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,.22);
    }
    .mw-spinner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }
}


