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 .4s cubic-bezier(0.6, -0.28, 0.735, 0.045),opacity .4s cubic-bezier(0.42, 0, 0.58, 1) .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 .4s cubic-bezier(0.42, 0, 0.58, 1)}.loading>*{pointer-events:none}loading-bar svg,.loading-bar svg{fill:rgba(0,0,0,0);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 var(--animation-loading-bar-duration, var(--animation-duration, 2s)) var(--animation-loading-bar-ease, var(--animation-ease, linear)) var(--animation-loading-bar-delay, var(--animation-delay, 0s)) var(--animation-loading-bar-loop, var(--animation-loop, infinite)) var(--animation-loading-bar-direction, var(--animation-direction, normal)) var(--animation-loading-bar-fill, var(--animation-fill, 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 */