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

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-spinner {
  height: var(--size);
  width: var(--size);
  display: block;
}
pn-spinner svg {
  animation: rotate 1s infinite;
  display: block;
}
pn-spinner svg .circle {
  stroke: #005d92;
  transform-origin: center center;
  transform: rotate(-310deg);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 64;
  animation: loading 2s infinite;
}
pn-spinner svg .dot {
  fill: #005d92;
}
pn-spinner.light .circle {
  stroke: #ffffff;
}
pn-spinner.light .dot {
  fill: #ffffff;
}
pn-spinner svg,
pn-spinner svg .circle {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

@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);
  }
}