ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 2.8 kB
JavaScript
import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.51);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-cube-size:calc(var(--uib-size)/5.5);--uib-arc-1:-80deg;--uib-arc-2:80deg;align-items:flex-start;display:flex;height:100%;justify-content:center;width:100%}.cube{animation:metronome var(--uib-speed) linear infinite;height:calc(var(--uib-size)*.5);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom}.cube,.cube:after{width:var(--uib-cube-size)}.cube:after{animation:morph var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transition:background-color .3s ease}@keyframes metronome{0%{transform:rotate(var(--uib-arc-1))}10%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}60%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-2))}to{transform:rotate(var(--uib-arc-1))}}@keyframes morph{0%,5%{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}12.5%{transform:scaleX(1.5);transform-origin:center left}27.5%{transform:scaleX(1);transform-origin:center left}27.5001%,42.5%{transform:scaleX(1);transform-origin:center right}47.5%{animation-timing-function:ease-in;transform:scaleX(.75) scaleY(1.25);transform-origin:center right}65%{transform:scaleX(1.5);transform-origin:center right}77.5%{transform:scaleX(1);transform-origin:center right}77.5001%,95%{transform:scaleX(1);transform-origin:center left}to{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}}';class r 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:70,color:"black",speed:1.65}),this.template.innerHTML=`\n <div class="container"><div class="cube"></div></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-bouncy-arc")=>{customElements.get(e)||customElements.define(e,class extends r{})},element:r};export{i as default};
//# sourceMappingURL=bouncyArc.js.map