nukeop/nuclear

@import '../../common.scss';

.loader {
  @include roundCorners;
  position: relative;
  display: block;

  width: 5em;
  height: 5em;

  &.default {
    @include shadow;
    background: linear-gradient(45deg, #43CBFF 0%, #9708CC 100%);
    background-size: 100% 100%;
    border-radius: 1em;

    span {
      position: absolute;
      width: 0;
      height: 0;
      border-top: 1.5em solid $white;
      border-left: 1em solid transparent;
      border-right: 1em solid transparent;
    }

    span:nth-child(1) {
      left: 1.5em;
      top: 1em;
      animation: triangle-anim 1s ease infinite;
    }

    span:nth-child(2) {
      top: 2.5em;
      left: 0.5em;
      animation: triangle-anim 1s ease infinite 0.66s;
    }

    span:nth-child(3) {
      top: 2.5em;
      right: 0.5em;
      animation: triangle-anim 1s ease infinite 0.33s;
    }

    span:nth-child(4) {
      display: none;
    }

    @keyframes triangle-anim {
      0%, 100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }
  }

  &.circle {
    span:first-child {
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border-top: 5px solid $white;
      border-bottom: 5px solid $white;
      border-right: 5px solid $white;
      border-left: 5px solid transparent;
      animation: circle-anim 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
    }


  }

  &.small {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;

    span:first-child {
      display: flex;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 50%;
      border-top: 5px solid $white;
      border-bottom: 5px solid $white;
      border-right: 5px solid $white;
      border-left: 5px solid transparent;
      animation: circle-anim 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
    }
  }
}

@keyframes circle-anim {
  0% {

  }

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