.flat-loading__container i:nth-child(4) {
          background: #F1C40F;
          -ms-transform: rotate(270deg) translate(0, 16px);
              transform: rotate(270deg) translate(0, 16px);
          animation: loading-child-4 3s ease-in-out infinite;
}.flat-loading__container i:nth-child(3) {
          background: #1ABC9C;
          -ms-transform: rotate(180deg) translate(0, 16px);
              transform: rotate(180deg) translate(0, 16px);
          animation: loading-child-3 3s ease-in-out infinite;
}.flat-loading__container i:nth-child(2) {
          background: #34495E;
          -ms-transform: rotate(90deg) translate(0, 16px);
              transform: rotate(90deg) translate(0, 16px);
          animation: loading-child-2 3s ease-in-out infinite;
}.flat-loading {
    background: rgba(255, 255, 255, .6);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    z-index: 10000;
}

.flat-loading__container {
      position: relative;
      width: 12px;
      height: 12px;
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
      animation: loading 3s ease-in-out infinite;
}

.flat-loading__container i {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
}

.flat-loading__container i:nth-child(1) {
          background: #E74C3C;
          -ms-transform: translate(0, 16px);
              transform: translate(0, 16px);
          animation: loading-child-1 3s ease-in-out infinite;
}

@keyframes loading {
  25% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(225deg);
  }
  75% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes loading-child-1 {
  17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% {
    transform:translate(0, 16px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform:translate(0, 12px);
  }
}

@keyframes loading-child-2 {
  17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% {
    transform:rotate(90deg) translate(0, 16px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform:rotate(90deg) translate(0, 12px);
  }
}

@keyframes loading-child-3 {
  17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% {
    transform:rotate(180deg) translate(0, 16px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform:rotate(180deg) translate(0, 12px);
  }
}

@keyframes loading-child-4 {
  17.5%, 25%, 42.5%, 50%, 67.5%, 75%, 92.5%, 100% {
    transform:rotate(270deg) translate(0, 16px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform:rotate(270deg) translate(0, 12px);
  }
}