$spinners: 12;

.loading.inline {
  position: relative;
  margin: 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  
  & .circle {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    border: 3px solid transparent;
    box-sizing: border-box;
    border-color: rgba(0, 0, 0, .1);
    border-top-color: rgba(255, 255, 255, .7);
    animation: loading 1s linear infinite;
  }
  &.black .circle {
    border-color: #c9c9c9;
    border-top-color: #666;
  } 

  & .circular {
    display: inline-block;
    height: 24px;
    width: 24px;
    animation: loading 2s linear infinite;  

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      border: 3px solid transparent;
      box-sizing: border-box;  
      animation: circular 2s ease infinite;
    }
  }

  & .spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: relative;
    animation: loading 1s linear infinite;  
    animation-timing-function: steps(12);
    & view {
      width: 100%;
      height: 100%;
      position: absolute;
      text-align: center;
      top: 0;
      left: 0;

      &::after {
        content: '';
        background: #fff;
        height: 25%;
        display: block;
        width: 2px;
        border-radius: 2px;
        margin: 0 auto;
      }

      @for $i from 1 to $spinners {
        &:nth-child($i) {
          transform: rotate(calc($i * 30)deg);
          opacity: calc(1 / ($spinners + 2) * ($spinners - $i));
        }
      }
    }
  }
  &.black .spinner view::after {
    content: '';
    background: #c9c9c9;
    height: 25%;
    display: block;
    width: 2px;
    border-radius: 2px;
    margin: 0 auto;
  }
}

.loading.block {
  & .dot-spinner {
    margin: 15px 15px;
    overflow: hidden;

    & view {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background: #fff;
      display: inline-block;
      margin-left: 3px;
      position: relative;
      left: 0;

      animation: dot-spinner 2s ease infinite;
      @for $i from 1 to 6 {
        &:nth-child($i) {
          animation-delay: calc((6 - $i)/10)s;
        }
      }
      @for $i from 6 to $spinners {
        &:nth-child($i) {
          display: none;
        }
      }
    }
  }

  &.black .dot-spinner view {
    background: #c9c9c9;
  }
}


@keyframes dot-spinner {
  40% {
    left: calc(50% - 15px);
  }

  60% {
    left: calc(50% - 15px);
  }

  100% {
    left: 100%;
  }
}

@keyframes circular {
  0% {
    border-color: #fff;
  }
  12% {
    border-top-color: transparent;
  }
  25% {
    border-right-color: transparent;
  }
  37% {
    border-bottom-color: transparent;
  }
  50% {
    border-left-color: transparent;
  }
  64% {
    border-top-color: #fff
  }
  75% {
    border-right-color: #fff;
  }
  87.5% {
    border-bottom-color: #fff;
  }
  100% {
    border-color: #fff;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg)
  }

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