/*
 *
 * Elements - Loader
 *
 */

.loader
  display: flex
  height: 50px
  width: 50px
  margin: 1em auto

  &.circle
    border-radius: 50%
    border: 4px solid rgba(255, 255, 255, 0)
    animation: rotateCircle 4s infinite ease-in-out

  &.wheel
    border-radius: 50%
    border: 6px solid $light
    border-top-color: $dark
    border-bottom-color: $dark
    animation: rotateWheel 2.5s infinite ease-in-out

  &.square
    background-color: lighten($primary,30%)
    animation: squareAnimation 2s infinite linear, squareColors 2s infinite linear