.is-busy {
    position: relative;
    * {
        transition: none;
        visibility: hidden;
    }
    &:after {
        content: '';
        display: block;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        border: 5px solid;
        border-top-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        color: inherit;
        background-color: transparent;
        animation: loader-button 0.9s linear infinite;
        z-index: 99;
        width: ($input-btn-padding-x * 2);
        height: ($input-btn-padding-x * 2);
        margin: -$input-btn-padding-x;
    }
    &.btn-sm:after {
        width: ($input-btn-padding-x-sm * 2);
        height: ($input-btn-padding-x-sm * 2);
        margin: -$input-btn-padding-x-sm;
    }
}
.spinner {
    width: 70px;
    height: 40px;
    margin: -20px 0 0 -35px;
    position: absolute;
    left: 50%;
    top: 50%;
    > div {
        width: 18px;
        height: 18px;
        background-color: $primary;
        border-radius: 100%;
        display: inline-block;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        &.bounce1 {
            animation-delay: -0.32s;
        }
        &.bounce2 {
            animation-delay: -0.16s;
        }
    }
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}
@keyframes loader-button{
    100%{
        transform:rotate(360deg)
    }
}
.sk-circle {
    width: 90px;
    height: 90px;
    position: relative;
    .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        &:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: $white;
            border-radius: 100%;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
        }
    }
    .sk-circle2 {
        transform: rotate(30deg);
        &:before {
            animation-delay: -1.1s;
        }
    }
    .sk-circle3 {
        transform: rotate(60deg);
        &:before {
            animation-delay: -1s;
        }
    }
    .sk-circle4 {
        transform: rotate(90deg);
        &:before {
            animation-delay: -0.9s;
        }
    }
    .sk-circle5 {
        transform: rotate(120deg);
        &:before {
            animation-delay: -0.8s;
        }
    }
    .sk-circle6 {
        transform: rotate(150deg);
        &:before {
            animation-delay: -0.7s;
        }
    }
    .sk-circle7 {
        transform: rotate(180deg);
        &:before {
            animation-delay: -0.6s;
        }
    }
    .sk-circle8 {
        transform: rotate(210deg);
        &:before {
            animation-delay: -0.5s;
        }
    }
    .sk-circle9 {
        transform: rotate(240deg);
        &:before {
            animation-delay: -0.4s;
        }
    }
    .sk-circle10 {
        transform: rotate(270deg);
        &:before {
            animation-delay: -0.3s;
        }
    }
    .sk-circle11 {
        transform: rotate(300deg);
        &:before {
            animation-delay: -0.2s;
        }
    }
    .sk-circle12 {
        transform: rotate(330deg);
        &:before {
            animation-delay: -0.1s;
        }
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}
@keyframes slide-up{
    from{
        transform:translateY(0.5rem);
        opacity:0
    }
    to{
        transform:translateY(0);
        opacity:1
    }
}