@include b(loading) {
  display: inline-block;
  vertical-align: middle;
  span {
    display: inline-block;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    animation: fsRotate .8s linear infinite;
    animation-duration: 2s;
  }
  &-default span i {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    /* stylelint-disable-next-line */
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59.75' height='60.25' viewBox='0 -2 59.75 60.25'%3E%3Cpath fill='%23ccc' d='M29.691-.527c-15.648 0-28.333 12.685-28.333 28.333s12.685 28.333 28.333 28.333c15.648 0 28.333-12.685 28.333-28.333S45.339-.527 29.691-.527zm.184 53.75c-14.037 0-25.417-11.379-25.417-25.417S15.838 2.39 29.875 2.39s25.417 11.379 25.417 25.417-11.38 25.416-25.417 25.416z'/%3E%3Cpath fill='none' stroke='%23e83e43' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M56.587 29.766c.369-7.438-1.658-14.699-6.393-19.552'/%3E%3C/svg%3E")
  }
  &-circular {
    span {
      svg {
        width: 100%;
        height: 100%;
        opacity: 1;
        circle {
          stroke: currentColor;
          stroke-width: 3;
          stroke-linecap: round;
          animation: fsCircular 1.5s ease-in-out infinite;
        }
      }
    }
  }
  &-spinner {
    span {
      position: relative;
      i {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        &::before {
          content: ' ';
          display: block;
          width: 2px;
          height: 20%;
          margin: 0 auto;
          border-radius: 40%;
          background-color: currentColor;
        }
      }
    }
  }
  &-white {
    padding: 17px 30px;
    border-radius: 8px;
    text-align: center;
    background-color: $primary-text-color;
    opacity: .5;
    &-text {
      margin: 10px 0;
      color: #fff;
    }
  }
}

@for $i from 1 to 13 {
  .fs-loading-spinner span i:nth-of-type(#{$i}) {
    $val: $i;

    opacity: calc(1 - (.75 / 12) * ($val - 1));
    transform: rotate(($val * 30deg));
  }
}