$theme-colours: ();
$theme-colours: map-merge((
  "yellow" : #f9a541,
  "red"    : #f44321,
  "blue"   : #5091cd,
  "green"  : #7ac143,
), $theme-colours);

:host {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: .8;
}

.box {
  position: relative;
  width: 345px;
  height: 345px;
  margin: 0 auto;

  p {
    float: right;
    margin: 95px 0 0;
    font: normal 1.25em/1em sans-serif;
    color: #999;
  }

  > span {
    animation: jspinner 2s infinite ease-in-out;
  }

  .red {
    animation-delay: -1.5s;
  }
  .blue {
    animation-delay: -1s;
  }
  .green {
    animation-delay: -.5s;
  }
}

@each $colour in $theme-colours {
  $key: nth($colour, 1);
  $value: nth($colour, 2);

  .#{$key} {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    content: "";
    background: $value;
    border-radius: 90px;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: content-box;
      width: 50px;
      content: "";
      background: transparent;
      border: 50px solid $value;
    }

    &::before {
      height: 35px;
      margin: 60px 0 0 -30px;
      border-width: 50px 50px 0;
      border-radius: 75px 75px 0 0;
    }

    &::after {
      height: 105px;
      margin: 140px 0 0 -30px;
      border-width: 0 0 0 50px;
    }
  }
}

.yellow {
  margin: 0 0 0 255px;
  transform: rotate(45deg);
}

.red {
  margin: 255px 0 0 255px;
  transform: rotate(135deg);
}

.blue {
  margin: 255px 0 0;
  transform: rotate(225deg);
}

.green {
  transform: rotate(315deg);
}

@keyframes jspinner {
  0%, 40%, 100% {
    opacity: .3;
  }
  20% {
    opacity: 1;
  }
}


@media (prefers-reduced-motion: reduce) {
  .box > span {
    animation: none;
  }
}