@coderundebug/ui-web/icon/ui-icon-spinner.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
export class UiIconSpinner extends HTMLElement{static get CSS(){return" .spinner{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:inherit;--ui-c1:var(--ui-icon-primary-color, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-c2:var(--ui-icon-secondary-color, var(--ui-c1));aspect-ratio:1 / 1;}.ring1, .ring2{grid-column:1;grid-row:1;}.ring2{animation-name:spin;animation-duration:750ms;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes spin{0%{transform:rotate(0deg);}50%{transform:rotate(270deg);}100%{transform:rotate(360deg);}} "}static get HTML(){return' <div class="spinner"><div class="ring1"><svg viewBox="0 0 16 16" style=" display: block; height: 100%; min-width: 8px; min-height: 8px; stroke-width: 2; stroke: var(--ui-c2); opacity: 0.5; fill: none;"><circle cx="8" cy="8" r="6" /></svg></div><div class="ring2"><svg viewBox="0 0 16 16" style=" display: block; height: 100%; min-width: 8px; min-height: 8px; stroke-width: 2; stroke: var(--ui-c1); stroke-linecap: round; fill: none;"><path d="m 3.7573592,3.7573594 a 6,6 0 0 1 8.4852818,0"></path></svg></div></div> '}constructor(){super(),this.attachShadow({mode:"open"}),this.i=!1}async connectedCallback(){!0!==this.i&&(this.shadowRoot.innerHTML=UiIconSpinner.HTML,this.t=new CSSStyleSheet,await this.t.replace(UiIconSpinner.CSS),this.shadowRoot.adoptedStyleSheets=[this.t])}}customElements.define("ui-icon-spinner",UiIconSpinner);