
// Loading spinner based on Harold Soto's "Wave"
// https://codepen.io/bernethe/pen/dorozd

speed = 0.8s
color = theme-color

@keyframes spinner-before
  from
    opacity: 1
    transform: scale(1.0, 1.0)
  to
    opacity: 0
    transform: scale(1.5, 1.5)

@keyframes spinner-after
  from
    opacity: 0
    transform: scale(0.5, 0.5)
  to
    transform: scale(1.0, 1.0)
    opacity: 1

.spinner
  border-radius: 50%
  position: relative
  opacity: 1

  &:before, &:after
    content:''
    border: 1px color solid
    border-radius: 50%
    width: 100%
    height: 100%
    position: absolute
    left: 0

  &:before
    transform: scale(1,1)
    opacity: 1
    animation: spinner-before speed infinite linear

  &:after
    transform: scale(0,0)
    opacity: 0
    animation: spinner-after speed infinite linear


