loader.css

/**
 * Proud To Load
 * Author: Katarina Ljungdahl <jag@katarinaljungdahl.se>
 * License: MIT
 */

@keyframes rainbow-color-is-rotating {
 from {
   transform: rotate(-180deg);
 }
 to {
    transform: rotate(180deg);
 }
}

.rainbow {
  width: 160px;
  height: 80px;
  position: absolute;
  top: calc(50% + 40px);
  left: 50%;
  margin-left: -80px;
  margin-top: -80px;
  overflow: hidden;
}

.rainbow-container {
  width: 160px;
  height: 160px;
  transform: rotate(45deg) translateY(1px);
}

.rainbow-color {
  position: absolute;
  border-radius: 50%;
  border: 10px solid transparent;
  box-sizing: border-box;
  animation-name: rainbow-color-is-rotating;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform: rotate(-180deg)
}

.rainbow-color.red {
  border-left-color: #f03837;
  border-top-color: #f03837;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  animation-delay: 0;
}

.rainbow-color.orange {
  border-left-color: #ffb900;
  border-top-color: #ffb900;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  animation-delay: 0.14s;
}

.rainbow-color.yellow {
  border-left-color: #ffe200;
  border-top-color: #ffe200;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  left: 20px;
  top: 20px;
  animation-delay: 0.05s;
}

.rainbow-color.green {
  border-left-color: #9adf10;
  border-top-color:  #9adf10;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  left: 30px;
  top: 30px;
  animation-delay: 0.45s;
}

.rainbow-color.blue {
  border-left-color: #1cc2da;
  border-top-color: #1cc2da;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  left: 40px;
  top: 40px;
  animation-delay: 0.3s;
  animation-timing-function: ease-out;
}

.rainbow-color.indigo {
  border-left-color: #545cda;
  border-top-color: #545cda;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  left: 50px;
  top: 50px;
  animation-delay: 0.7s;
}

.rainbow-color.violet {
  border-left-color: #dc7fba;
  border-top-color: #dc7fba;
  width: calc(100% - 120px);
  height: calc(100% - 120px);
  left: 60px;
  top: 60px;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-duration: 1.2s;
}

.rainbow-cover-box {
  width: 0;
  height: 0;
  border-width: 79px 81px 81px 79px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  position: relative;
}