stickerpicker/web/style/spinner.sass

// Chase spinner from https://tobiasahlin.com/spinkit/. MIT license
.sk-center-wrapper
  width: 100%
  display: flex
  justify-content: space-around

.sk-chase
  position: relative
  animation: sk-chase 2.5s infinite linear both

  &.green > .sk-chase-dot:before
    background-color: #00C853

  > .sk-chase-dot
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    animation: sk-chase-dot 2.0s infinite ease-in-out both

    &:before
      content: ''
      display: block
      width: 25%
      height: 25%
      border-radius: 100%
      animation: sk-chase-dot-before 2.0s infinite ease-in-out both
      background-color: #FFF

    &:nth-child(1)
      animation-delay: -1.1s
    &:nth-child(2)
      animation-delay: -1.0s
    &:nth-child(3)
      animation-delay: -0.9s
    &:nth-child(4)
      animation-delay: -0.8s
    &:nth-child(5)
      animation-delay: -0.7s
    &:nth-child(6)
      animation-delay: -0.6s
    &:nth-child(1):before
      animation-delay: -1.1s
    &:nth-child(2):before
      animation-delay: -1.0s
    &:nth-child(3):before
      animation-delay: -0.9s
    &:nth-child(4):before
      animation-delay: -0.8s
    &:nth-child(5):before
      animation-delay: -0.7s
    &:nth-child(6):before
      animation-delay: -0.6s

@keyframes sk-chase
  100%
    transform: rotate(360deg)

@keyframes sk-chase-dot
  80%, 100%
    transform: rotate(360deg)

@keyframes sk-chase-dot-before
  50%
    transform: scale(0.4)
  100%, 0%
    transform: scale(1.0)