ldrs/dist/elements/trio.js

Tiny HTML and SVG loaders as web components

import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:25%;animation:spin var(--uib-speed) infinite linear;display:inline-block;height:var(--uib-size);position:relative;width:var(--uib-size)}.dot{height:100%;left:calc(50% - var(--uib-dot-size)/2);width:var(--uib-dot-size)}.dot,.dot:after{position:absolute}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";height:0;left:0;padding-bottom:100%;top:0;transition:background-color .3s ease;width:100%}.dot:first-child{transform:rotate(120deg)}.dot:first-child:after{animation:wobble var(--uib-speed) infinite ease-in-out}.dot:nth-child(2){transform:rotate(-120deg)}.dot:nth-child(2):after,.dot:nth-child(3):after{animation:wobble var(--uib-speed) infinite ease-in-out}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wobble{0%,to{transform:translateY(0)}50%{transform:translateY(65%)}}';class i extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.3}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(t="l-trio")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{s as default};
//# sourceMappingURL=trio.js.map