<div class="arc">
</div>
<h1><span>LOADING</span></h1>

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: rgb(11, 11, 20);
  font-family: 'Inconsolata', monospace;
  overflow: hidden;
}

@mixin arc($pos, $mg, $tp, $rg, $bt, $lf, $wd, $hg, $br, $btp, $brl, $anim) {
  position: $pos;
  margin: $mg;
  top: $tp;
  right: $rg;
  bottom: $bt;
  left: $lf;
  width: $wd;
  height: $hg;
  border-radius: $br;
  border-top: $btp;
  border-left: $brl;
  border-right: $brl;
  animation: $anim;
}

.arc {
  @include arc(absolute, auto, 0, 0, 0, 0, 100px, 100px, 50%, 2px solid rgb(255, 234, 41), 1px solid transparent, rt 2s infinite linear);
  &::before {
    @include arc(absolute, auto, 0, 0, 0, 0, 70px, 70px, 50%, 2px solid rgb(141, 41, 255), 1px solid transparent, rt 4s infinite linear reverse);
    content: "";
  }
  &::after {
    @include arc(absolute, auto, 0, 0, 0, 0, 0, 0, 50%, initial, initial, cw 1s infinite);
    content: "";
    background: rgb(255, 250, 250);
  }
}

h1 {
  position: absolute;
  height: 40px;
  margin: auto;
  top: 200px;
  left: 0;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: lighter;
  color: white;
  span {
    display: none;
  }
  &::after {
    animation: txt 5s infinite;
    content: "";
  }
}

@keyframes rt {
  100% {transform: rotate(360deg);}
}

@keyframes cw {
  0% {
    width: 0;
    height: 0;
  }
  75% {
    width: 40px;
    height: 40px;
  }
  100% {
    width: 0;
    height: 0;
  }
}

@keyframes txt {
  0% {
    content: "LOADING.";
  }
  50% {
    content: "LOADING..";
  }
  100% {
    content: "LOADING...";
  }
}