/**
 * @atom Loading
 * @section Loading
 * @modifiers
 *  .loading-sm 小loading,按钮中使用
 *  .loading-lg 大loading,组件加载使用
 *  .loading-bar 条形Loading，模块加载使用
 *  .loading-logo TIP logo loading
 *  .bar loading里的小矩形
 * @markup
 *  <div class="loading-lg">
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *  </div>
 *  <div class="loading-sm">
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *    <div class="bar"></div>
 *  </div>
 *  <div class="loading-logo">TIP</div>
 *  <br />
 *  <br />
 *  <div class="loading-bar">
 *    <div class="loading-bar-background"></div>
 *    <div class="loading-bar-foreground"></div>
 *  </div>
 */

$blue: $basic-aid-color;
$blue-light: $basic-aid-blue-color;

.loading {
  display: inline-block;
  position: relative;
  background-color: transparent;
  .bar {
    position: absolute;
    animation-duration: 1.1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .bar-1,
  .bar:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: 0s;
  }
  .bar-2,
  .bar:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: 0.1s;
  }
  .bar-3,
  .bar:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: 0.2s;
  }
  .bar-4,
  .bar:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: 0.3s;
  }
  .bar-5,
  .bar:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: 0.4s;
  }
  .bar-6,
  .bar:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: 0.5s;
  }
  .bar-7,
  .bar:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: 0.6s;
  }
  .bar-8,
  .bar:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: 0.7s;
  }
  .bar-9,
  .bar:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: 0.8s;
  }
  .bar-10,
  .bar:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: 0.9s;
  }
  .bar-11,
  .bar:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: 1s;
  }
  .bar-12,
  .bar:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 1.1s;
  }
}
.loading-lg {
  @extend .loading;
  width: 80px;
  height: 80px;
  .bar {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    left: calc(50% + 18px);
    top: calc(50% - 2px);
    transform-origin: -18px center;
    animation-name: spin_lg;
  }
  // .bar-1, .bar-2, .bar-3, .bar-4, .bar-5, .bar-6, .bar-7, .bar-8, .bar-9, .bar-10, .bar-11, .bar-12 {
  // animation-name: spin_lg;
  // }
}
.loading-sm {
  @extend .loading;
  width: 20px;
  height: 20px;
  .bar {
    width: 4px;
    height: 1px;
    border-radius: 1px;
    left: calc(50% + 6px);
    top: 50%;
    transform-origin: -6px center;
    animation-name: spin_sm;
  }
  // .bar-1, .bar-2, .bar-3, .bar-4, .bar-5, .bar-6, .bar-7, .bar-8, .bar-9, .bar-10, .bar-11, .bar-12 {
  // animation-name: spin_sm;
  // }
}

.loading-bar {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  .loading-bar-background {
    position: absolute;
    background-color: #c9e2ff;
    width: 100%;
    height: 100%;
  }
  .loading-bar-foreground {
    position: absolute;
    top: 0;
    right: -100%;
    background-color: $basic-aid-color;
    width: 20%;
    height: 100%;
    animation: loading-bar 1s ease-in-out 0s infinite;
  }
}

.loading-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 70px;
  color: $primaryBlueColor;
  font-size: 16px;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 2px;

  .loading-box-icon {
    transform: scale(0.5);
    margin-right: -30px;
    transform-origin: center left;
  }
}

@keyframes spin_lg {
  0% {
    background-color: $blue-light;
  }
  5% {
    background-color: #fff;
  }
  100% {
    background-color: $blue-light;
  }
}
@keyframes spin_sm {
  // 0% {
  //     background-color: $basic-aid-gray-color;
  // }
  // 5% {
  //     background-color: $basic-imp-color;
  // }
  // 100% {
  //     background-color: $basic-aid-gray-color;
  // }
  0% {
    background-color: $blue-light;
  }
  5% {
    background-color: #fff;
  }
  100% {
    background-color: $blue-light;
  }
}

@keyframes loading-bar {
  from {
    right: 100%;
  }
  to {
    right: -20%;
  }
}