.spinner-container
    width: 100%
    height: 100px
    display: flex
    justify-content: center
    align-items: center

.lds-dual-ring
    display: inline-block
    height: 80px
    position: relative

    &:after
        content: " "
        display: block
        width: 64px
        height: 64px
        margin: 8px
        border-radius: 50%
        border: 6px solid $blue
        border-color: $blue transparent $blue transparent
        animation: lds-dual-ring 1.2s linear infinite
        // position: absolute
        // left: 48%
        // top: 0

@keyframes lds-dual-ring
    0%
        transform: rotate(0deg)

    100%
        transform: rotate(360deg)

.loader,
.loader:before,
.loader:after
    background: $white
    -webkit-animation: load1 1s infinite ease-in-out
    animation: load1 1s infinite ease-in-out
    width: 1rem
    height: 2rem
    color: $white

.loader
    color: #ffffff
    text-indent: -9999em
    margin: 1.5rem auto
    position: relative
    font-size: 11px
    -webkit-transform: translateZ(0)
    -ms-transform: translateZ(0)
    transform: translateZ(0)
    -webkit-animation-delay: -0.16s
    animation-delay: -0.16s

    &:before,

    &:after
        position: absolute
        top: 0
        content: ''

    &:before
        left: -1.5em
        -webkit-animation-delay: -0.32s
        animation-delay: -0.32s

    &:after
        left: 1.5em

@-webkit-keyframes load1
  0%,
  80%,
  100% 
    box-shadow: 0 0
    height: 2rem

  40% 
    box-shadow: 0 -1rem
    height: 3rem

@keyframes load1
    0%,
    80%,
    100%
        box-shadow: 0 0
        height: 2rem

    40%
        box-shadow: 0 -1rem
        height: 3rem