.spinner
  .ball
  p LOADING

@import bourbon

$bgc: #645cc1

body
  background-color: $bgc
  text-align: center
  
.spinner
  width: 100px
  height: 50px
  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
  margin: auto
  text-align: center
  
  .ball
    width: 20px
    height: 20px
    background-color: #fff
    border-radius: 50%
    display: inline-block
    animation: motion 3s $ease-in-out-quart infinite
    
p
  color: #fff
  margin-top: 5px
  font-family: sans-serif
  letter-spacing: 3px
  font-size: 10px
    
@keyframes motion
  0%
    transform: translateX(0) scale(1)
  25%
    transform: translateX(-50px) scale(0.3)
  50%
    transform: translateX(0) scale(1)
  75%
    transform: translateX(50px) scale(0.3)
  100%
    transform: translateX(0) scale(1)