@keyframes rotating {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1080deg);
  }
}

.hx-pad-loading {
  position: relative;
  display: flex;
  .text-loading {
    font-size: $font-md;
  }
  &.inline {
    display: inline-flex;
  }
  &.breathing {
    animation: breatheOpacity 2s infinite;
  }
  &.row {
    align-items: center;
    justify-content: flex-start;
    &.center {
      justify-content: center;
    }
    &.right {
      justify-content: flex-end;
    }
    .text-loading {
      display: inline-block;
      padding-left: $pm-md;
      vertical-align: top;
      margin-top: 0;
      &.no-text {
        display: none;
      }
    }
  }
  &.column {
    width: auto;
    flex-direction: column;
    overflow-y: visible!important;
    align-items: center;
    .text-loading {
      margin-top: $pm-sm;
      display: block;
      &.no-text {
        display: none;
      }
    }
    .hx-loading-canvas {
      display: block;
    }
  }
  .hx-loading-canvas {
    animation: rotating 4s linear infinite;
  }
}