@scania/tegel/dist/collection/components/spinner/spinner.css

Tegel Design System

/* Component variables aka overrides */
:root {
  --spinner-background-inverted: var(--tds-white);
}

:root,
.scania,
.scania .tds-mode-light {
  --spinner-background: var(--tds-blue-400);
}

.scania .tds-mode-dark {
  --spinner-background: var(--tds-blue-400);
}

.traton,
.traton .tds-mode-light {
  --spinner-background: rgba(0, 72, 82, 1);
}

.traton .tds-mode-dark {
  --spinner-background: rgba(194, 191, 182, 1);
}

/* Component variables */
:root {
  --spinner-speed: 1.8s;
  --spinner-speed-lg: 2s;
  --spinner-radius-xs: 8px;
  --spinner-radius-sm: 12px;
  --spinner-radius-md: 26px;
  --spinner-radius-lg: 42px;
  --spinner-radius: var(--spinner-radius-lg);
  --spinner-stroke-width-xs: 3px;
  --spinner-stroke-width-sm: 4px;
  --spinner-stroke-width-md: 6px;
  --spinner-stroke-width-lg: 8px;
  --spinner-stroke-width: var(--spinner-stroke-width-lg);
  --PI: 3.14159265358979;
}

:host {
  box-sizing: border-box;
  display: block;
}
:host * {
  box-sizing: border-box;
}

.tds-spinner-svg {
  display: block;
  width: calc(var(--spinner-radius) * 2);
  height: calc(var(--spinner-radius) * 2);
  transform: scale(-1, 1) rotate(-90deg);
}
.tds-spinner-svg-xs {
  --spinner-radius: var(--spinner-radius-xs);
  --spinner-stroke-width: var(--spinner-stroke-width-xs);
  --spinner-animation-speed: var(--spinner-speed);
}
.tds-spinner-svg-sm {
  --spinner-radius: var(--spinner-radius-sm);
  --spinner-stroke-width: var(--spinner-stroke-width-sm);
  --spinner-animation-speed: var(--spinner-speed);
}
.tds-spinner-svg-md {
  --spinner-radius: var(--spinner-radius-md);
  --spinner-stroke-width: var(--spinner-stroke-width-md);
  --spinner-animation-speed: var(--spinner-speed);
}
.tds-spinner-svg-lg {
  --spinner-radius: var(--spinner-radius-lg);
  --spinner-stroke-width: var(--spinner-stroke-width-lg);
  --spinner-animation-speed: var(--spinner-speed-lg);
}

.tds-spinner-circle {
  cx: var(--spinner-radius);
  cy: var(--spinner-radius);
  r: calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);
  fill: none;
  --spinner-stroke-dash: calc((2 * var(--PI)) * var(--spinner-radius));
  stroke-dasharray: var(--spinner-stroke-dash);
  stroke-width: var(--spinner-stroke-width);
  animation: dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.tds-spinner-circle-standard {
  stroke: var(--spinner-background);
}
.tds-spinner-circle-inverted {
  stroke: var(--spinner-background-inverted);
}

@keyframes dash {
  from {
    stroke-dashoffset: calc(-1 * var(--spinner-stroke-dash));
  }
  to {
    stroke-dashoffset: var(--spinner-stroke-dash);
  }
}