/**
* This is a default style. If you want to use the default ntk-smart-loader loader,
* simply copy the HTML code in the documentation.
**/

.loader-container {

  .loader {
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    top: 0;

    .circle {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 50%;
      transition: all 180ms linear;
      opacity: 0;

      &:before {
        content: '';
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        border: 3px solid #efefef;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
      }

      &:after {
        content: '';
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        border: 3px solid #5677fc;
        border-radius: 50%;
        border-left-color: transparent;
        border-top-color: transparent;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        animation: RotateIt 1s linear infinite;
      }
    }
  }

  &.active {
    .loader {
      .circle {
        opacity: 1;
        animation: hop 500ms cubic-bezier(0.5, 1.25, 0.5, 1.25);
        transform: translateY(0%);
      }
    }
  }

  &.leave {
    .loader {
      .circle {
        opacity: 0;
        animation: poh 500ms cubic-bezier(0.5, 1.25, 0.5, 1.25);
      }
    }
  }
}

@keyframes hop {
  0% {
    transform: translateY(150%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes poh {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(150%);
    opacity: 0;
  }
}

@keyframes RotateIt {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(720deg);
  }
}