ui-loading {
  display: block;
  position: relative;
  margin: 5px auto;
  width: 30px;
  height: 30px;

  > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    span {
      display: block;
      margin: 5% auto;
      width: 2px;
      border-radius: 2px;
      height: 25%;
      background-color: #999;
      animation: loading-animation 1.2s infinite ease-in-out both;
    }
  }

  @for $i from 1 through 12 {
    .ui-loading-#{$i} {
      transform: rotate(#{$i * 30}deg);

      span {
        animation-delay: #{-1.2 + $i / 10}s;
      }
    }
  }
}

@keyframes loading-animation {
  0%,
  39%,
  100% {
    opacity: .3;
  }
  40% {
    opacity: 1;
  }
}