main.wrapper
  section.loaders
    span.loader.loader-quart 
    |  Loading...
  section.loaders.loaders-bg-2
    span.loader.loader-double 
    |  Loading...
  section.loaders.loaders-bg-3
    span.loader.loader-circles 
    |  Loading...
  section.loaders.loaders-bg-4
    span.loader.loader-bars
      span 
    |  Loading...

// $Var
$bg-color: #FFFF33;
$bg-color-1: #0066CC;
$bg-color-2: #FC4532;
$bg-color-3: #FF29C8;
$bg-color-4: #0000FF;
$color: #F9E5FF;

// $Mixin
@mixin size($width , $height: $width ) {
  width: $width;
  height: $height;
}

@mixin fontsize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

@mixin absPosition ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacityIE: $opacity * 100;
  filter: alpha(opacity=$opacityIE);
}

@mixin animation($animation...) {
  -webkit-animation: $animation;
  animation: $animation;
}
/* $Base */
body {
  font-family: sans-serif;
  @include fontsize(40);
  text-align: center;
  color: $color;
  background-color: $bg-color;
}

.wrapper {
  lex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  margin: 4rem;
  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }
}

.loaders {
  height: 300px;
  line-height: 300px;
  background-color: $bg-color-1;
  box-shadow: rgba(0, 0, 0, 0.11) 0px 15px 30px 0px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px;
  border-radius: 0.5rem;
}

.loaders-bg-2 {
  background-color: $bg-color-2;
}
.loaders-bg-3 {
  background-color: $bg-color-3;
}
.loaders-bg-4 {
  background-color: $bg-color-4;
}

.loader {
  display: inline-block;
  position: relative;
  @include size(50px);
  vertical-align: middle;
}

/*  $Loader Quadrant
  ========================================================================== */

.loader-quart {
  border-radius: 50px;
  border: 6px solid rgba(255, 255, 255, 0.4);
  &:after {
    content: "";
    @include absPosition(-6px, -6px, -6px, -6px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    @include animation(spin 1s linear infinite);
  }
}

/*  $Loader Double circle
  ========================================================================== */

.loader-double {
  border-radius: 50px;
  border: 6px solid transparent;
  border-top-color: $color;
  border-bottom-color: $color;
  @include animation(spin 1.5s linear infinite);
  &:before,
  &:after {
    content: "";
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    border-bottom-color: $color;
    @include opacity(0.6);
    @include animation(spinreverse 2s linear infinite);
  }
  &:before {
    top: 13px;
    left: 13px;
    bottom: 13px;
    right: 13px;
    @include animation(spinreverse 3s linear infinite);
  }
}

/*  $Loader Multiple circle
  ========================================================================== */

.loader-circles {
  border-radius: 50px;
  border: 3px solid transparent;
  border-top-color: #fff;
  @include animation(spin 1s linear infinite);
  &:before,
  &:after {
    content: "";
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: $color;
    @include opacity(0.8);
    @include animation(spinreverse 5s linear infinite);
  }
  &:before {
    top: 12px;
    left: 12px;
    bottom: 12px;
    right: 12px;
    @include animation(spinreverse 10s linear infinite);
  }
}

/*  $Loader Bars
  ========================================================================== */

.loader-bars:before,
.loader-bars:after,
.loader-bars span {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  @include size(10px, 30px);
  background-color: $color;
  @include animation(grow 1.5s linear infinite);
}

.loader-bars:after {
  left: 15px;
  @include animation(grow 1.5s linear -0.5s infinite);
}

.loader-bars span {
  left: 30px;
  @include animation(grow 1.5s linear -1s infinite);
}

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
}

@keyframes grow {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}

@-webkit-keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}

@keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}

// Loading animation with keyframe for SCSS & Jade

// inspired by <http://www.grafikart.fr/tutoriels/html-css/loaders-animes-496>

// Author Joël Lesenne <https://joellesenne.dev>