.ve-loading-parent-relative {
  position: relative !important;
}

.ve-loading-parent-lock {
  overflow: hidden !important;
}

.ve-loading {

  // overlay
  &.ve-loading-overlay {
    position: absolute;
    z-index: 1999;
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  // fixed
  &.ve-loading-fixed {
    position: fixed !important;
  }

  // hide
  &.ve-loading-hide {
    display: none;
  }

  // spin container
  &-spin-container {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    margin-left: -20px;
    width: 100%;
    text-align: center;

    .ve-loading-spin {
      display: inline-block;
    }
  }

  /* plane */
  &-plane {
    animation: sk-plane 1.2s infinite ease-in-out;
  }

  @keyframes sk-plane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }

    50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

  /* bounce */
  &-bounce {
    position: relative;

    &-dot {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      /* background-color: var(--sk-color); */
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    &-dot:nth-child(2) {
      animation-delay: -1s;
    }
  }

  @keyframes sk-bounce {

    0%,
    100% {
      transform: scale(0);
    }

    45%,
    55% {
      transform: scale(1);
    }
  }

  /* wave */
  &-wave {
    display: flex;
    justify-content: space-between;

    &-rect {
      height: 100%;
      width: 15%;
      animation: sk-wave 1.2s infinite ease-in-out;
    }

    &-rect:nth-child(1) {
      animation-delay: -1.2s;
    }

    &-rect:nth-child(2) {
      animation-delay: -1.1s;
    }

    &-rect:nth-child(3) {
      animation-delay: -1s;
    }

    &-rect:nth-child(4) {
      animation-delay: -0.9s;
    }

    &-rect:nth-child(5) {
      animation-delay: -0.8s;
    }
  }

  @keyframes sk-wave {

    0%,
    40%,
    100% {
      transform: scaleY(0.4);
    }

    20% {
      transform: scaleY(1);
    }
  }

  /* pulse */
  &-pulse {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  @keyframes sk-pulse {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

  /* flow */
  &-flow {
    width: calc(var(--sk-size) * 1.3);
    height: calc(var(--sk-size) * 1.3);
    display: flex;
    justify-content: space-between;

    &-dot {
      width: 25%;
      height: 25%;
      background-color: var(--sk-color);
      border-radius: 50%;
      animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both;
    }

    &-dot:nth-child(1) {
      animation-delay: -0.3s;
    }

    &-dot:nth-child(2) {
      animation-delay: -0.15s;
    }

    @keyframes sk-flow {

      0%,
      80%,
      100% {
        transform: scale(0.3);
      }

      40% {
        transform: scale(1);
      }
    }
  }

  /* grid */
  &-grid {
    /* Cube positions
* 1 2 3
* 4 5 6
* 7 8 9
*/

    &-cube {
      width: 33.33%;
      height: 33.33%;
      background-color: var(--sk-color);
      float: left;
      animation: sk-grid 1.3s infinite ease-in-out;
    }

    &-cube:nth-child(1) {
      animation-delay: 0.2s;
    }

    &-cube:nth-child(2) {
      animation-delay: 0.3s;
    }

    &-cube:nth-child(3) {
      animation-delay: 0.4s;
    }

    &-cube:nth-child(4) {
      animation-delay: 0.1s;
    }

    &:nth-child(5) {
      animation-delay: 0.2s;
    }

    &-cube:nth-child(6) {
      animation-delay: 0.3s;
    }

    &-cube:nth-child(7) {
      animation-delay: 0s;
    }

    &-cube:nth-child(8) {
      animation-delay: 0.1s;
    }

    &-cube:nth-child(9) {
      animation-delay: 0.2s;
    }

    @keyframes sk-grid {

      0%,
      70%,
      100% {
        transform: scale3D(1, 1, 1);
      }

      35% {
        transform: scale3D(0, 0, 1);
      }
    }
  }
}