libs/barista-components/loading-distractor/src/loading-spinner.scss
@import '../../core/src/style/variables';

$dt-loading-spinner-default-size: 30px;
$dt-loading-spinner-small-size: 15px;
$dt-loading-spinner-offset: 22px * 3.1416; // r(-gap)*2*3.14
$dt-loading-spinner-duration: 1700ms;
$dt-loading-spinner-ease: cubic-bezier(0.645, 0.045, 0.355, 1);

:host {
  display: inline-block;
  width: $dt-loading-spinner-default-size;
  height: $dt-loading-spinner-default-size;
}

// There is an issue in angular with the combination of :host ans :host-context.
// As a workaround you have to move the :host-context after the :host selector
:host :host-context(.dt-form-field),
:host :host-context(.dt-filter-field),
:host :host-context(.dt-button) {
  width: $dt-loading-spinner-small-size;
  height: $dt-loading-spinner-small-size;

  // This overrides the min-with requirement for prefix/suffix
  min-width: $dt-loading-spinner-small-size;
}

.dt-loading-spinner-svg {
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  stroke-width: 4px;
  stroke: $logolime;
  fill: none;
  animation: dt-loading-spinner-spin $dt-loading-spinner-duration * 2 linear
    infinite;
}

:host-context(.dt-form-field) .dt-loading-spinner-svg[dtPrefix],
:host-context(.dt-form-field) .dt-loading-spinner-svg[dtSuffix],
:host-context(.dt-filter-field) .dt-loading-spinner-svg {
  stroke: $gray-500;
}

:host-context(.dt-button) {
  // align icon with the baseline of the text
  vertical-align: -3px;
  margin-right: 8px;

  .dt-loading-spinner-svg {
    stroke: #ffffff;
  }
}

:host-context(.dt-button-secondary) .dt-loading-spinner-svg {
  stroke: $gray-300;
}

.dt-loading-spinner-path {
  stroke-dasharray: $dt-loading-spinner-offset;
  transform-origin: center;
  animation: dt-loading-spinner-dash $dt-loading-spinner-duration
    $dt-loading-spinner-ease infinite;
}

@-webkit-keyframes dt-loading-spinner-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dt-loading-spinner-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dt-loading-spinner-dash {
  0% {
    stroke-dashoffset: 138.2304px;
  }
  50% {
    stroke-dashoffset: 86.394px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dt-loading-spinner-dash {
  0% {
    stroke-dashoffset: 138.2304px;
  }
  50% {
    stroke-dashoffset: 86.394px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
