@mixin loading-spanner-variant($loading-spinner-width, $loading-spinner-cell-width, $color) {
  &::before {
    background: rgba($color, .5);
    box-shadow: 0 ($loading-spinner-width - $loading-spinner-cell-width *2.8) rgba($color, 1);
  }

  &::after {
    background: rgba($color, .4);
    box-shadow: 0 ($loading-spinner-width - $loading-spinner-cell-width *2.8) rgba($color, .7);
    transform: rotate(-45deg);
  }

  i::before {
    background: rgba($color, .3);
    box-shadow: 0 ($loading-spinner-width - $loading-spinner-cell-width *2.8) rgba($color, .6);
    transform: rotate(-90deg);
  }

  i::after {
    background: rgba($color, .2);
    box-shadow: 0 ($loading-spinner-width - $loading-spinner-cell-width *2.8) rgba($color, .55);
    transform: rotate(-135deg);
  }
}
