.spinner {
  opacity: 0;
  height: 0;
  transition: all 400ms ease-in-out;
  margin: 0 auto;

  &.active{
    opacity: 1;
    height: 100px;
    transition: all 400ms ease-in-out;
    margin: $sizeLarge auto;
    padding-top: $sizeMedium;
  }
}

.cssload-spin-box {
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  animation: cssload-spin ease infinite 3.6s;
  -o-animation: cssload-spin ease infinite 3.6s;
  -ms-animation: cssload-spin ease infinite 3.6s;
  -webkit-animation: cssload-spin ease infinite 3.6s;
  -moz-animation: cssload-spin ease infinite 3.6s;
}

@include keyframes(cssload-spin){
  0%,
  100% {
    box-shadow: 18px 18px $themeColor, -18px 18px rgb(223,223,223), -18px -18px $themeColor, 18px -18px rgb(223,223,223);
  }
  25% {
    box-shadow: -18px 18px rgb(223,223,223), -18px -18px $themeColor, 18px -18px rgb(223,223,223), 18px 18px $themeColor;
  }
  50% {
    box-shadow: -18px -18px $themeColor, 18px -18px rgb(223,223,223), 18px 18px $themeColor, -18px 18px rgb(223,223,223);
  }
  75% {
    box-shadow: 18px -18px #dfdfdf, 18px 18px $themeColorDark, -18px 18px #dfdfdf, -18px -18px $themeColorDark;
  }
}