ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 2.05 kB
JavaScript
import e from"../lib/LdrsBaseElement.js";var t=':host{--uib-dot-size:calc(var(--uib-size)*0.24);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative;width:100%}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:var(--uib-dot-size);transform:scale(0);transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.375) infinite}.dot{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.25) infinite both}.container:after{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.125) infinite}@keyframes pulse{0%,to{transform:scale(0)}50%{transform:scale(1)}}';class s extends e{_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:43,color:"black",speed:1.3}),this.template.innerHTML=`\n <div class="container"><div class="dot" /></div>\n <style>\n :host{\n --uib-size: ${this.size}px;\n --uib-color: ${this.color};\n --uib-speed: ${this.speed}s;\n }\n ${t}\n </style>\n `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n :host{\n --uib-size: ${this.size}px;\n --uib-color: ${this.color};\n --uib-speed: ${this.speed}s;\n }\n ${t}\n `)}}var i={register:(e="l-dot-pulse")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
//# sourceMappingURL=dotPulse.js.map