_loading-indicator.scss

@use '@justeat/pie-design-tokens/dist/jet' as dt;

$loading-indicator-size-medium: 20px;
$loading-indicator-size-large: 48px;
$loading-indicator-color-default: dt.$color-orange;
$loading-indicator-borderSize: 3px;
$loading-indicator-borderColorOpaque-default: rgba(243, 109, 0, 0.2);
$loading-indicator-spacing: 20px;

@mixin spinnerColor($loading-indicator-color: $loading-indicator-color-default, $loading-indicator-borderColorOpaque: $loading-indicator-borderColorOpaque-default) {
  .c-spinner {
    border: $loading-indicator-borderSize solid $loading-indicator-color;
    border-top: $loading-indicator-borderSize solid $loading-indicator-borderColorOpaque;
    border-right: $loading-indicator-borderSize solid $loading-indicator-borderColorOpaque;
  }
}

@mixin loadingIndicator($loading-indicator-size: 'medium') {
  /**
  * Components > Spinner Indicator
  * =================================
  *
  * Example: f-searchbox -  Loqate feature enabled (Full address capture)
  *
  * If you'd like to use it in your project you can include it by adding `@include loadingIndicator();` into your SCSS dependencies file.
  * Then add `<span class=“c-spinner” />` to your html;
  * If you’d like to change spinner colour add `@include spinnerColor(mainColourVar, opaqueColourVar);` to the parent element of the spinner styles.
  */

  @keyframes spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(359deg);
    }
  }

  .c-spinner-wrapper {
    position: absolute;
    right: 0;
  }


  @include spinnerColor();

  .c-spinner {
    margin-right: $loading-indicator-spacing;
    border-radius: 50%;
    animation: spin 1s linear 0s infinite;


    @if $loading-indicator-size == 'large' {
      width: $loading-indicator-size-large;
      height: $loading-indicator-size-large;
    } @else {
      width: $loading-indicator-size-medium;
      height: $loading-indicator-size-medium;
    }
  }
}