@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-spinner {
  display: inline-block;
}

pn-spinner .pn-spinner {
  --pn-spinner-size: 1.5em;
  --pn-spinner-color: main.$blue700;
  height: var(--pn-spinner-size);
  width: var(--pn-spinner-size);
  display: block;
  animation: rotate 1s infinite;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-spinner .pn-spinner {
    animation-duration: 2s;
  }
}
pn-spinner .pn-spinner-circle {
  stroke: var(--pn-spinner-color);
  transform-origin: center center;
  transform: rotate(-310deg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 64;
  animation: loading 2s infinite;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-spinner .pn-spinner-circle {
    animation-duration: 4s;
  }
}
pn-spinner .pn-spinner-dot {
  fill: var(--pn-spinner-color);
}

@keyframes loading {
  0% {
    stroke-dashoffset: 55;
  }
  50% {
    stroke-dashoffset: 12;
  }
  100% {
    stroke-dashoffset: 55;
  }
}
@keyframes rotate {
  from {
    transform: rotate(-180deg) scaleX(-1);
  }
  to {
    transform: rotate(180deg) scaleX(-1);
  }
}