loading-bar, .loading-bar {
  --loading-bar-stroke-colour: #dddddd;
  width: var(--loading-bar-size, 1.4em);
  height: var(--loading-bar-size, 1.4em);
  min-width: var(--loading-bar-size, 1.4em);
  min-height: var(--loading-bar-size, 1.4em);
  pointer-events: none;
  display: inline-flex;
  place-items: center;
  place-content: center;
}
loading-bar.centred, .loading-bar.centred {
  position: absolute;
  top: min(var(--spacer2), 50% - var(--loading-bar-size, 1.4em) / 2);
  left: calc(50% - var(--loading-bar-size, 1.4em) / 2);
}
.loaded loading-bar svg {
  transition: transform 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0.6s;
  transform: scale(0);
  opacity: 0;
}
.loaded loading-bar svg circle.ring {
  transition: var(--transition);
  opacity: 0;
}
.loaded loading-bar svg circle.background {
  transition: var(--transition);
  stroke: #ff2871;
}
.loaded .loading-bar-target {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.loading > * {
  pointer-events: none;
}

loading-bar svg, .loading-bar svg {
  fill: transparent;
  position: relative;
  width: calc(var(--loading-bar-size, 1.4em) - max(8px, 1.2em) / 4);
  height: calc(var(--loading-bar-size, 1.4em) - max(8px, 1.2em) / 4);
  min-width: calc(var(--loading-bar-size, 1.4em) - max(8px, 1.2em) / 4);
  min-height: calc(var(--loading-bar-size, 1.4em) - max(8px, 1.2em) / 4);
}
loading-bar svg circle, .loading-bar svg circle {
  stroke-width: var(--loading-bar-border-thickness, max(8px, 1.2em));
  transform-origin: center;
  transition: stroke var(--transition);
}
loading-bar svg circle.background, .loading-bar svg circle.background {
  stroke: var(--loading-bar-background-stroke-colour, var(--loading-bar-stroke-colour));
}
loading-bar svg circle.ring, .loading-bar svg circle.ring {
  stroke: var(--loading-bar-ring-stroke-colour, var(--loading-bar-stroke-colour));
  --loading-bar-stroke-colour: url(#brand-gradient);
  animation: loading-bar 2s linear 0s infinite normal forwards;
}
@keyframes loading-bar {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: calc(-1px * var(--stroke-dasharray) / 100 * 100);
  }
  100% {
    transform: rotate(360deg);
    stroke-dashoffset: calc(-1px * var(--stroke-dasharray) / 100 * 298);
  }
}
/*# sourceMappingURL=../sourcemaps/components/loading-bar.css.map */